反应钩子使用状态与旧状态在孩子的第一次渲染使用效果

Question

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

一个带有一个useState钩子的父对象和三个带有useEffect钩子的子对象。我希望子级通过回调来更新父级中的状态，这样所有组件的状态都会更新到父级中一个对象中。这对初始/第一次渲染不起作用，因为当前状态不会在每次useEffect触发的回调之间更新(请参阅上面的示例或下面的代码(。这意味着组合状态仅由最后一个子级的状态组成。

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} />
</>
);
};

• 我可以在父级中声明初始状态，但这是更多的代码
• 我可以在渲染缓存中使用(一个我像useStae一样手动更新的对象，但是立即更改(，但感觉很脏
• 挂钩useReducer是一个很好的解决方案吗

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

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 }));
};

你的代码将工作

尽管这个：

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

不是一个好的做法。

更好的子组件具有自己的状态，您可以通过如果这些状态彼此类似，则创建自定义钩子。