我试图有一个运行 setState 两次的通用函数，但是，第一个 setState 不会更新。有没有办法绕过它？或者如何解决这个问题？
家长
const [data, setData] = useState({});
const updateData = (key, value) => {
console.log(key, value);
setData({ ...data, [key]: value });
};
...
<div>
Num 1: {data.num1}, Num2: {data.num2}
</div>
<Child updateData={updateData} />
孩子
const { updateData } = props;
const onClick = () => {
updateData("num1", 1);
updateData("num2", 2);
};
return <button onClick={onClick}> Click here </button>
console.log 返回两个被调用的值，但只有 1 个值被更新
（经过一些测试，即使在同一个父函数中调用setData它们，如果调用两次，它仍然不起作用（参见 Simplify.js）
虽然您可以使用回调，以便参数包含当前更新的状态，包括已运行但在重新渲染发生之前的先前状态设置器：
const updateData = (key, value) => {
setData(data => ({ ...data, [key]: value }));
};
如果data变量中可能的属性数量有限，请考虑使用单独的状态：
const [num1, setNum1] = useState(0);
const [num2, setNum2] = useState(0);
const onClick = () => {
setNum1(num1 + 1);
setNum2(num2 + 2);
};
本文收集自互联网，转载请注明来源。
如有侵权，请联系 [email protected] 删除。
我来说两句