javascript - 如何使用 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 挂钩的新值。我将如何解决这个问题？

标签： javascriptreactjsreact-hooksuse-state

Answer 1

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

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

您还可以使用useEffect来监视对numbers. 删除setRowsfrom addRow，然后执行：

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

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