React 中对象数组的 SetState

Posted 2023-02-15

【中文标题】React 中对象数组的 SetState

【英文标题】：SetState of an array of Objects in React

【发布时间】：2018-09-03 18:38:18

【问题描述】：

好的，所以我很沮丧找到正确的解决方案，所以我在这里发布问题。给出答案会对我有很大帮助，因为我被卡住了！

状态树是这样的

this.state = 
      itemList : [
                    _id : 1234,
                   description : 'This the description',
                   amount : 100
                    , 
                    _id : 1234,
                   description : 'This the description',
                   amount : 100
                    ],
     

问题是：

无法根据数组的Object更新任何特定的key 到_id 之前的状态应该保持不变

【参考方案1】：

于 2018 年 3 月 25 日回答

这就是您将如何使用 setState 和 prevstate 来更新数据结构中对象的某个属性。

this.setState(prevState => (
    itemList: prevState.itemList.map(
    obj => (obj._id === 1234 ? Object.assign(obj,  description: "New Description" ) : obj)
  )
));

于 2019 年 12 月 12 日回答（REACT HOOKS）

import React,  useState  from 'react';
const App = () => 
  const [data, setData] = useState([
    
      username: '141451',
      password: 'password',
      favoriteFood: 'pizza',
    ,
    
      username: '15151',
      password: '91jf7jn38f8jn3',
      favoriteFood: 'beans'
    
  ]);
  return (
    <div>
    data.map(user => 
      return (
        <div onClick=() => 
          setData([...data].map(object => 
            if(object.username === user.username) 
              return 
                ...object,
                favoriteFood: 'Potatos',
                someNewRandomAttribute: 'X'
              
            
            else return object;
          ))
        >
        JSON.stringify(user) + '\n'
        </div>
      )
    )
    </div>
  )

【讨论】：

@Omar 我需要更新数组中的所有对象？？

然后 const updatedValues = array.map(item => return ...item, updatedKey: 'value' )

Object.assign(obj 改变当前状态对象，这是 React 中的反模式。 Object.assign(, obj 会正确地创建一个新对象。

救命！！！

【参考方案2】：

将数据更新到对象数组的最佳方式

onChange= (e) => this.setState(formData: ...this.state.formData, 'plan_id': e.target.value)

【参考方案3】：

要更新这样构造的状态，您必须找到要更新的元素的索引，复制数组并更改找到的索引。

如果您将记录列表作为对象，以 id 作为键，以记录作为值，则更容易且更具可读性。

【讨论】：

那么如何迭代所有对象呢？

如果您在应用程序中使用 lodash 或 ramda，您可以使用它，也可以使用 Object.keys()。我通常使用redux来保留这样的数据并使用reselect，所以我的选择器返回数组

【参考方案4】：

这样做的唯一方法是复制 itemList，对其进行修改，然后为其设置状态。

update() 
   let itemList = this.state.itemList.slice();
   //update it
   this.setState( itemList );

【讨论】：

let itemList = this.state.itemList;。如果你在这之后修改itemList，你就是在改变状态。

切片时不会。

@DragoşPaulMarinescu 你错了，切片​​创建副本

由于帖子被编辑，很明显我的评论提到了初始代码。

@DragoşPaulMarinescu 没有看到编辑，不过刚刚看到