在 React Native 中更新嵌套状态对象？

Question

我正在创建一个购物清单应用程序，使用户能够创建购物清单。用户创建的每个购物清单都具有以下属性：

关键姓名预算列表项

嵌套在 listItem 中属性是列表项的对象数组。

每个列表项都具有以下属性： ID：姓名：价格：

这是一个代码片段：

const [shoppingLists, setShoppingList] = useState([
    {key: '1', name: `Khari's Shopping List`, budget: 200, listItems:[
            {id: Math.random().toString(), name:"butter", price:2.00},
            {id: Math.random().toString(), name:"milk", price:2.00},
            {id: Math.random().toString(),  name:"cereal", price: 3.00},
            {id: Math.random().toString(),  name:"chicken", price: 4.00},
            {id: Math.random().toString(),  name:"spaghetti", price: 5.00},
        ], },
    {key: '2', name: `Janae's Shopping List`, budget: 500, listItems:[
            {id: Math.random().toString(), name:"butter2", price:0.00},
            {id: Math.random().toString(), name:"milk2", price:0.00},
            {id: Math.random().toString(),  name:"cereal3", price: 0.00},
            {id: Math.random().toString(),  name:"chicken2", price: 0.00},
            {id: Math.random().toString(),  name:"spaghetti2", price: 0.00},
        ], },

])

我想做的是当用户在文本输入中输入数字时更新嵌套在列表项中的价格属性。关于如何实现此目标的任何想法？

当用户在文本输入中输入数字时，我会根据 id 更新列表项数组中的价格属性。我不确定从哪里开始，我希望得到一些指导。感谢您提供的任何帮助。

Answer 1

在功能组件状态更新中，您需要将现有状态浅层复制到新对象中，更新特定对象。对于更深的嵌套状态，您还需要复制嵌套状态并更新。

给定指定的 key、id，并更新 price

setShoppingList(lists =>
  lists.map(list =>
    list.key === key
      // Key matches, spread existing state and update list items array
      ? {
          ...list,
          listItems: list.listItems.map(item =>
            item.id === id
              // Item id match, spread existing item and update price
              ? {
                  ...item,
                  price
                }
              // No item id match, pass existing item
              : item
          )
        }
      // No key match, pass existing list
      : list
  )
);

在 React Native 中更新嵌套状态对象？

Updating a nested state Object in React Native?

javascript

arrays

updating

reactjs

react-native