Question

我在我的React应用程序中有处于状态的Map列表。例如：

item : [ { name: 'abc', age: '10' }, { name: 'xyz', age: '2' }, { name: 'sdf', age: '6'} ]

如果我只想更改集合“年龄”：10（名称“ xjz”），我将如何更新状态。

Answer 1

您应该使用新值创建一个映射到旧数组的新数组：

const initial = [
  { name: 'abc', age: '10' },
  { name: 'xyz', age: '2' },
  { name: 'sdf', age: '6'}
]

const updated = initial.map(element =>
                  element.name === 'xyz'
                    ? { ...element, age: 10 }
                    : element
                )
                
console.log(updated)
/*
[
  {
    "name": "abc",
    "age": "10"
  },
  {
    "name": "xyz",
    "age": 10
  },
  {
    "name": "sdf",
    "age": "6"
  }
]
*/

请记住，如果您需要前一个状态来计算下一个状态，则需要调用setState传递一个将前一个状态作为第一个参数的函数：

this.setState(
  prevState => ({
    // ... the new state here (where you map over your items)
  })
)

Answer 2

最简单的解决方案是map您的数组，只替换条件匹配的项目：

this.setState(prev => ({
    item: prev.item.map(item => item.name === 'xjz' ? { ...item, age: '10' } : item)
}))

在类函数中：

changeValue = name => {
    this.setState(prev => ({
        item: prev.item.map(item => item.name === name ? { ...item, age: '10' } : item)
    }))
}

changeValue('xyz')

Answer 3

您可以使用地图。例如：

const newData = data.map(val => {
  if(val.id === id) {
    return {...val, name: 'new name'};
  }
  return val;
}

Answer 4

您必须在状态下更新关联变量：

this.state.values[1].age = 10;

this.setState({
    values,
});

如何在React中为数组中的特定对象设置状态

4 个答案: