React Native setState 添加数组的最后一项

Question

所以我得到了一个名为 items const [items, setItems] = React.useState([]);

的 setState

我的项目数组结构

[{
  "id": "0.625240011345925",
  "item_name": "Item 23",
  "item_price": "23",
  "item_qty": "1"
}, {
  "id": "0.735657461482515",
  "item_name": "Item 4",
  "item_price": "30",
  "item_qty": "1"
}, {
  "id": "0.287635530963835",
  "item_name": "Item 2",
  "item_price": "56",
  "item_qty": "1"
}]

主要功能

    const AddItemToBill = (navigation) => {
    navigation.navigate('AddItemToBill', {
        onReturn: (itemArray) => {
            const array = itemArray;
            for (let i = 0; i < array.length; i++) {
                const element = array[i];
                setItems([...items, element]);
                console.log('Items: ' + JSON.stringify(array))
            }
        }, navigation
    })
};

在下面的 Gif 中检查问题

Answer 1

React setState 是。更新状态仅在下一个渲染周期可用。因此，在 for 循环中添加多个项目只会导致更新最后一个项目。

Rules of hooks - 不要在循环、条件或嵌套函数中调用 Hooks。相反，始终在 React 函数的顶层使用 Hooks，在任何早期 returns.

之前

正确的方法是建立一个新的中间数组并更新一次状态 -

const array = itemArray;
const newState = []; // array to hold the final state
for (let i = 0; i < array.length; i++) {
    const element = array[i];
    // update the array for the final state
    // DO NOT UPDATE STATE HERE
    newState.push(element);
    console.log('Items: ' + JSON.stringify(array))
}
// update state ONCE outside forloop
setItems([...items, newState]);

Answer 2

由于循环获取所有元素，直接展开即可itemArray

 onReturn: (itemArray) => {
                setItems(prev => ([...prev, ...itemArray]));
            }

也使用了 prev 而不是 items 直接说明它总是使用数组的最后一个值来调用，以防用户连续进行两次快速交互

React Native setState 添加数组的最后一项

React Native setState add's last item of the array

react-native