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

Question

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

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

/*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)
            }

The console logs

Answer 1

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

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