UseEffect 和 useCallback 仍然会导致 React 项目中的无限循环

Question

我似乎无法解决我的 react 项目中的无限循环问题。

我正在开发一个每日日志反应应用程序。让我简要解释一下这个项目。下面是代码图片供快速查看：

底部有相同的代码。

结构（从上到下）

1. DailyLog 组件有一个使用 Question 组件的表单，其中传递了 props。
2. Question 组件使用道具来显示问题和描述。它还包含一个 Input 组件，props 会进一步向下传递。
3. Input 组件获取道具并呈现适当的表单输入字段。

逻辑（从下到上）

1. Input 组件处理它自己的inputState。当用户输入内容并触发onChangeHandler 时，状态会发生变化。
2. Input 组件还有一个useEffect() 钩子，它调用一个onInput() 函数，该函数作为道具从DailyLog 传递下来。
3. DailyLog 组件中的onInputHandler() 更新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;

Answer 1

从 useEffect 敏感列表中移除 id 和 onInput

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

并将 inputState 的默认值设置为 '' 如下：

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

为了防止“一个组件正在将一个不受控制的文本类型的输入更改为 ReactJS 中的受控错误”。你也可以初始化formState：

const [formState, setFormState] = useState({title:'', focus:''});