在儿童的第一次渲染useEffect时，将hook useState与旧状态进行反应

Question

例子：https://codesandbox.io/s/react-hooks-playground-forked-15ctx?file=/src/index.tsx

一个父级有一个useState钩子，三个子级有一个use效应钩子。我希望子级通过回调更新父级中的状态，以便所有组件状态都更新为父级中的一个对象。这对于初始/第一渲染不起作用，因为当前状态不会在每个use效应触发的回调之间更新（参见上面的示例或下面的代码）。这意味着组合状态仅由最后一个子级的状态组成。

const ChildElement = ({ index, callback }) => {
  useEffect(() => {
    callback(index);
  }, []);
  return <>{index}</>;
};

const App = () => {
  const [state, setState] = useState(0);

  const callback = (index: any) => {
    const newObject = { a: index };
    setState({ ...state, [index]: newObject });
  };

  console.log(state);

  return (
    <>
      <ChildElement index={0} callback={callback} />
      <ChildElement index={1} callback={callback} />
      <ChildElement index={2} callback={callback} />
    </>
  );
};

• 我可以在父级中声明初始状态，但这需要更多的代码

有什么建议吗？解决这个问题的最佳方法是什么？

Answer 1

你正面临一场比赛。

如果你有所改变

const callback = (index: any) => {
    const newObject = { a: index };
    setState({ ...state, [index]: newObject });
  };

致：

  const callback = (index: any) => {
    const newObject = { a: index };
    setState((currentState) => ({ ...currentState, [index]: newObject }));
  };

你的代码会起作用的

虽然这：

所有组件状态都更新为父对象中的一个对象

这不是一个好的做法。

子组件最好有自己的状态，如果这些状态彼此相似，您可以通过创建自定义钩子来减少代码。