如何使用 useState 在 React 中异步设置 2 个状态

Question

我有这个功能：

const [numbers, setNumbers] = useState([]);
const [rows, setRows] = useState([]);

const addRow = () => {
    setNumbers([...numbers, numbers.length+1]);
    setRows([...rows,
        <NewGradeRow key={numbers[numbers.length-1]} number={numbers[numbers.length-1]}/>]);
}

应该添加新行。它应该向 numbers 挂钩添加一个新值，然后使用 numbers 挂钩中的新值在 rows 挂钩中添加一个新行。它虽然同步运行，但新行不使用赋予 numbers 挂钩的新值。我该如何解决这个问题？

Answer 1

从执行的计算中获取新值（加上原始numbers 的长度），而不是来自numbers 变量（尚未更新）：

const addRow = () => {
    const newNum = numbers.length + 1;
    setNumbers([...numbers, newNum]);
    setRows([...rows,
        <NewGradeRow
          key={newNum}
          number={newNum}
        />
    ]);
};

您也可以使用useEffect 来监视numbers 的变化。从addRow 中删除setRows，然后执行：

useEffect(() => {
    const newNum = numbers[numbers.length - 1];
    setRows([...rows,
        <NewGradeRow
          key={newNum}
          number={newNum}
        />
    ]);
}, numbers.length);

（如果numbers 的长度也可以从其他来源更改，您必须将其纳入逻辑）

Answer 2

你这里有一些误解。首先，setNumbers 和setRows 实际上运行异步，从某种意义上说，它们被批处理在一起只更改一次状态，而不是单独运行和更改应用程序状态两次。阅读this question 以了解此问题。

其次，您无法立即获得状态的“更新”值。这与关闭有关。阅读this question 或this article 以了解有关此问题的更多信息。此问题适用于回调和挂钩

Answer 3

“NewGradeRow”是 jsx 组件吗？ 如果是这样，我怀疑它是否可以在 setRows 状态中被调用或声明，它应该与 setRows 状态分开并放入 return 语句中。