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

我有这个功能：

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

const[numbers，setNumbers]=useState（[]）；
const[rows，setRows]=useState（[]）；
常量addRow=（）=>{
setNumbers（[…number，number.length+1]）；
setRows（[…行，
]);
}

---

这应该会添加新行。它应该向数字钩子添加一个新值，然后使用数字钩子中的新值在行钩子中添加一个新行。但它同步运行，新行不使用给定给数字挂钩的新值。如何解决此问题？

从执行的计算中获取新值（一个值加上原始

数字的长度），而不是从
数字变量（尚未更新）中获取：

（如果
数字的长度
也可以从其他来源更改，则必须将其考虑到逻辑中）
您在这里有一些误解。首先，
setNumbers
和
setRows
实际运行的是异步的，从某种意义上讲，它们被批处理在一起，只更改一次状态，而不是单独运行并更改两次应用程序状态。阅读以了解这个问题

其次，您无法立即获得状态的“更新”值。这与结束有些关系。阅读或了解有关此问题的更多信息。此问题同时适用于回调和挂钩
是否“NewGradeRow”是jsx组件？？
如果是这样，我怀疑它是否可以在setRows state instaed中调用或声明，它应该与setRows state分开并放在return语句中。
考虑只将数据存储在state中，并使用它从组件返回React元素（JSX）。是否有办法强制渲染然后强制第二次渲染？
const addRow = () => {
    const newNum = numbers.length + 1;
    setNumbers([...numbers, newNum]);
    setRows([...rows,
        <NewGradeRow
          key={newNum}
          number={newNum}
        />
    ]);
};

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