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

Question

我有这个 function：

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

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

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实际上是异步运行的，从某种意义上说，它们一起批处理以仅更改 state 一次，而不是单独运行和更改应用程序 state 两次。 阅读此问题以了解此问题。

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

Answer 3

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