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

Posted 2023-02-22

【中文标题】在 React Native 中更新嵌套状态对象？

【英文标题】：Updating a nested state Object in React Native?

【发布时间】：2020-11-13 19:11:14

【问题描述】：

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

键 姓名 预算 列表项

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

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

这是一个代码sn-p：

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 更新列表项数组中的价格属性。我不知道从哪里开始，我希望得到一些指导。感谢您提供的任何帮助。

【问题讨论】：

Math.random().toString() 的东西是错误的，你应该修复它。

我知道这是错误的，此时@Adam 仅用于测试目的。

【参考方案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
  )
);

【讨论】：

谢谢，这非常有用，我知道现在该去哪里了！

@K.Woods 如果这解决了您的问题，那么请接受作为答案，如果您觉得它有帮助，请点赞。

我搜索了很多，终于得到了这个，现在我可以嵌套任何级别并轻松更改（特定或任何）值，非常感谢。

@DrewReese 如何在不检查条件的情况下遍历第一个 .map() 函数的所有项，然后在嵌套的项中我想检查条件并更新它？？？

@JamalUdDin 您仍然需要检查您正在循环的任何数组的每个元素的条件，以了解您是否将从那里更新任何嵌套状态。在深入了解状态结构之前，您需要为该特定元素返回一个新的对象/数组引用。