javascript - React Hooks : state variable having wrong value in event handlers, 无法输入

Question

下面，我正在渲染 <App/>子组件为 <Input/>组件数组。我使用“添加新”按钮添加了一些输入。我能够添加输入文本组件。但是，当我在文本中输入值时，它没有显示。我无法修改状态数组中的对象，因为索引在 setData 中显示为“-1”功能。因此，当我们在文本框中键入时，值不会显示。请告诉我为什么state是[]当我访问 setData功能。

    function Input(props)
    {
        return (
            <div>
                <label htmlFor='variable'>Name</label>
                <input id='variable'
                    type='text'
                    value={props.value}
                    onChange={(e) => props.setData(props.id, e.target.value)} />

            </div>
        )
    }
    function App()
    {
        let [state, setState] = React.useState([])
        let [inputs, setInputs] = React.useState([])
        let setData = ((id, value) =>
        {
            console.log(state); // prints []
            let index = state.findIndex(ele => ele.key === id);
            console.log(index); // prints -1
            if (!(index === -1))
            {
                setState(state =>
                {
                    state[idx]["value"] = value;
                })
            }
        })
        let handleAdd = () =>
        {
            let idx = `${new Date().getTime()}`
            let tempState = {
                "key": idx,
                "value": "",
            }
            setState(state => [...state, tempState])
            let input = <Input key={tempState.key}
                value={tempState.value}
                id={tempState.key}
                setData={setData} />
            setInputs(inputs => [...inputs, input])
        }
        return (
            <div>
                <button onClick={handleAdd}>add new</button>
                <div>
                    {inputs}
                </div>
            </div>
        )
    }

Answer 1

当您在 handleAdd 中创建一个 Input 组件时，它会创建一个闭包，因此 setData 会获得该组件时存在的状态已创建，缺少新添加的状态。

一般来说，创建组件并将它们保存到状态并不是一个好的方法。相反，最好只将数据保存到状态并根据它渲染组件。

这是执行此操作的一种方法，请注意组件及其逻辑要简单得多。

function App() {
  let [state, setState] = React.useState([]);

  let setData = (id, value) => {
    const newState = state.map((st) => {
      if (st.key === id) {
        st.value = value;
      }

      return st;
    });

    setState(newState);
  };

  const addInput = () => {
    const idx = `${new Date().getTime()}`;
    setState([...state, { key: idx, value: '' }]);
  };

  return (
    <div>
      <button onClick={addInput}>add new</button>
      <div>
        {state.map((st) => (
          <Input value={st.value} key={st.key} setData={setData} id={st.key} />
        ))}
      </div>
    </div>
  );
}