React JS -如何实时更新状态数组?

Question

我有一个简单的UseState数量数组，它在按钮的click上更新。在onClick事件中，将创建一个新的数组来更新特定对象的数量值。然后将新数组设置为quantity数组。但是由于某些原因，数组不能实时更新。例如，如果第二项的数量被更新，则用新值创建新的数组。但原始数组保持不变。但是，如果我们再次点击按钮，这次原始数组将被更新为新数组的前一个值。

我将提供两个数组的代码和控制台日志。

/*state array for quantity*/
const [quantities, setQuantities] = useState([
{id: 1, quantity:0},
{id: 2, quantity:0},
{id: 3, quantity:0},
{id: 4, quantity:0},
{id: 5, quantity:0},
{id: 6, quantity:0},
{id: 7, quantity:0},
{id: 8, quantity:0},
{id: 9, quantity:0},
{id: 10, quantity:0}]);

/*Incrementing Quantity*/
const increment = () =>{
const newQuantity = quantities.map(obj => {
if (obj.id === info.id) {
return {...obj, quantity: obj.quantity+1};
}
return obj;
});
console.log(newQuantity)
setQuantities(newQuantity);
console.log(quantities)
}

控制台日志

Answer 1

setState在react中是异步的。它不会立即更新状态。可以使用useEffect检查一次更新

useEffect(() => {console.log(quantities)}, [quantities])