मैं अपनी प्रतिक्रिया परियोजना में एक अनंत लूप समस्या को हल करने के लिए प्रतीत नहीं कर सकता।

मैं दैनिक लॉग प्रतिक्रिया ऐप पर काम कर रहा हूं। मुझे परियोजना के बारे में संक्षेप में बताएं। यहाँ त्वरित दृश्य के लिए कोड की तस्वीर है:

Here is the picture of the code for quick view

वही कोड नीचे उपलब्ध है।

संरचना (ऊपर से नीचे तक)

  1. DailyLog घटक का एक रूप है जो Question घटकों का उपयोग करता है जिसमें प्रॉप्स पास किए जाते हैं।
  2. Question घटक प्रश्न और विवरण प्रदर्शित करने के लिए प्रॉप्स का उपयोग करता है। इसमें एक Input घटक भी शामिल होता है जिसमें प्रॉप्स को आगे नीचे किया जाता है।
  3. Input घटक सहारा लेता है और उपयुक्त प्रपत्र इनपुट फ़ील्ड प्रस्तुत करता है।

तर्क (नीचे से ऊपर तक)

  1. Input घटक इसे स्वयं संभालता है inputState। जब उपयोगकर्ता कुछ इनपुट करता है तो स्थिति बदल जाती है और onChangeHandler चालू हो जाता है।
  2. Input घटक में एक useEffect() हुक भी होता है जो एक onInput() फ़ंक्शन को कॉल करता है जिसे DailyLog से प्रॉप्स के रूप में पास किया गया था।
  3. onInputHandler() में DailyLog घटक formState को अपडेट करता है जो कि सभी इनपुट फ़ील्ड मानों वाली फॉर्म-वाइड स्थिति है। formState में संशोधन किया जाता है, जिसके आधार पर उस समय इनपुट फ़ील्ड भरा जाता है।
  4. onInputHandler() useCallback() हुक का उपयोग करता है, जो किसी भी माता-पिता/बच्चे के पुन: प्रस्तुत करने के कारण होने वाले अनंत लूप को रोकने वाला है। लेकिन यह काम नहीं करता है: भौंकना:

कोड में क्या गलत है? मुझे यहां क्या समझ नहीं आ रहा है? नीचे दिया गया कोड:

//DailyLog.js
import React, { useState, useCallback } from 'react';

import Question from '../components/FormElements/Question';
import questionData from '../components/DailyLog/questionData';
import './DailyLog.css';

const DailyLog = () => {
    const [formState, setFormState] = useState();

    const onInputHandler = useCallback(
        (inputId, inputValue) => {
            setFormState({
                ...formState,
                [inputId]: inputValue,
            });
        },
        [formState]
    );

    return (
        <main className="container">
            <form action="" className="form">
                <Question
                    id="title"
                    element="input"
                    type="text"
                    placeholder="Day, date, calendar scheme"
                    onInput={onInputHandler}
                />

                <Question
                    id="focus"
                    question={questionData.focusQuestion}
                    description={questionData.focusDescription}
                    element="textarea"
                    placeholder="This month's focus is... This week's focus is..."
                    onInput={onInputHandler}
                />
            </form>
        </main>
    );
};

export default DailyLog;

//Question.js
import React from 'react';

import Input from './Input';
import './Question.css';

const Question = props => {
    return (
        <div className="form__group">
            {props.question && (
                <label className="form__label">
                    <h2>{props.question}</h2>
                </label>
            )}

            <small className="form__description">{props.description}</small>

            <Input
                id={props.id}
                element={props.element}
                type={props.type}
                placeholder={props.placeholder}
                onInput={props.onInput}
            />
        </div>
    );
};

export default Question;

//Input.js
import React, { useState, useEffect } from 'react';

import './Input.css';

const Input = props => {
    const [inputState, setInputState] = useState();

    const { id, onInput } = props;

    useEffect(() => {
        onInput(id, inputState);
    }, [id, onInput, inputState]);

    const onChangeHandler = event => {
        setInputState(event.target.value);
    };

    // check if question element type is for input or textarea
    const element =
        props.element === 'input' ? (
            <input
                id={props.id}
                className="form__field"
                type={props.type}
                value={inputState}
                placeholder={props.placeholder}
                onChange={onChangeHandler}
            />
        ) : (
            <textarea
                id={props.id}
                className="form__field"
                rows="1"
                value={inputState}
                placeholder={props.placeholder}
                onChange={onChangeHandler}
            />
        );

    return <>{element}</>;
};

export default Input;

2
Suraj Radhakrishnan 6 अप्रैल 2020, 11:50

1 उत्तर

सबसे बढ़िया उत्तर

उपयोग प्रभाव संवेदनशीलता सूची से आईडी और इनपुट निकालें Remove

useEffect(() => {
        onInput(id, inputState);
}, [inputState]);

और इनपुटस्टेट के डिफ़ॉल्ट मान को '' पर निम्नानुसार सेट करें:

const [inputState, setInputState] = useState('');

रोकने के लिए 'एक घटक ReactJS में नियंत्रित त्रुटि के लिए टाइप टेक्स्ट के अनियंत्रित इनपुट को बदल रहा है'। इसके अलावा आप फॉर्मस्टेट में प्रवेश कर सकते हैं:

const [formState, setFormState] = useState({title:'', focus:''});
0
amin mohammadi 6 अप्रैल 2020, 14:06