Question

我有一个状态数组，让我们说这个.state.arr。我想在这个状态属性中添加一些内容，然后再更改一些属性。

选项1

onChange(event){
    this.state.arr.push('newvalue');
    ...
    this.setState({some:'val',arr:this.state.arr})
}

选项2

onChange(event){
    var newArr = this.state.arr;
    ...
    newArr.push('newvalue');
    ...
    this.setState({some:'val',arr:newArr})
}

所以..我知道this.state应该被视为不可变的。但是可以像在选项1中那样使用它，我仍然从中设置状态，或者我需要使用类似选项2的东西，因此总是首先在内存中复制

Answer 1

目前，这是最好的方法。

globals [timer]

Answer 2

您提供的两个选项都是相同的。它们都仍指向内存中的同一对象并具有相同的数组值。您应该将状态对象视为不可变，但是您需要重新创建数组，使其指向新对象，设置新项，然后重置状态。例如：

onChange(event){
    var newArray = this.state.arr.slice();    
    newArray.push("new value");   
    this.setState({arr:newArray})
}

Answer 3

如果您使用的是ES6语法，则可以使用spread operator将新项目作为单行添加到现有阵列中。

// Append an array
const newArr = [1,2,3,4]
this.setState({ arr: [...this.state.arr, ...newArr] });

// Append a single item
this.setState({ arr: [...this.state.arr, 'new item'] });

Answer 4

使用concat的另一种简单方法：

this.setState({
  arr: this.state.arr.concat('new value')
})

Answer 5

onChange() {
     const { arr } = this.state;
     let tempArr = [...arr];
     tempArr.push('newvalue');
     this.setState({
       arr: tempArr
    });
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 6

最好的一天。

this.setState({ myArr: [...this.state.myArr, new_value] })

Answer 7

如果你想继续向我一直在使用的数组中添加一个新对象：

_methodName = (para1, para2) => {
  this.setState({
    arr: this.state.arr.concat({para1, para2})
  })
}

Answer 8

handleValueChange = (value) => {
      let myArr= [...this.state.myArr]
      myArr.push(value)
      this.setState({
         myArr
     })

这可以完成工作。

Answer 9

这可能不会直接回答您的问题，但是是为了解决类似以下情况的情况

 state = {
    currentstate:[
     {
    id: 1 ,
    firstname: 'zinani',
    sex: 'male'

     }
    ]

 }

解决方案

const new_value = {
    id: 2 ,
    firstname: 'san',
    sex: 'male'

     }

用新值替换当前状态

 this.setState({ currentState: [...this.state.currentState, new_array] })

Answer 10

用于带有挂钩的功能组件

const [searches, setSearches] = useState([]);

// Using .concat(), no wrapper function (not recommended)
setSearches(searches.concat(query));

// Using .concat(), wrapper function (recommended)
setSearches(searches => searches.concat(query));

// Spread operator, no wrapper function (not recommended)
setSearches([...searches, query]);

// Spread operator, wrapper function (recommended)
setSearches(searches => [...searches, query]);

来源：https://medium.com/javascript-in-plain-english/how-to-add-to-an-array-in-react-state-3d08ddb2e1dc

Answer 11

使用 Hook 的捷径：

const [value, setValue] = React.useState([]);
setValue([...value,newvalue]);

React.js - 在状态中为数组添加值的最佳方法是什么

11 个答案: