我似乎在将数据推入状态数组时遇到问题。我正在尝试以这种方式实现它：

this.setState({ myArray: this.state.myArray.push('new value') })

但是我相信这是不正确的方式，并导致可变性问题？

数组推送返回长度

this.state.myArray.push('new value')返回扩展数组的长度，而不是数组本身。Array.prototype.push（）。

我猜您希望返回的值是数组。

不变性

似乎这是React的行为：

切勿直接更改this.state，因为之后调用setState（）可能会替换您所做的更改。将此this.state视为不可变的。React.Component。

我猜，您会这样做（不熟悉React）：

var joined = this.state.myArray.concat('new value');
this.setState({ myArray: joined })

使用es6可以像这样完成：

this.setState({ myArray: [...this.state.myArray, 'new value'] }) //simple value
this.setState({ myArray: [...this.state.myArray, ...[1,2,3] ] }) //another array

传播语法

绝不建议直接更改状态。

在更高版本的React中，建议的方法是在修改状态以防止竞争情况时使用updater函数：

将字符串推到数组的末尾

this.setState(prevState => ({
  myArray: [...prevState.myArray, "new value"]
}))

将字符串推送到数组的开头

this.setState(prevState => ({
  myArray: ["new value", ...prevState.myArray]
}))

将对象推到数组的末尾

this.setState(prevState => ({
  myArray: [...prevState.myArray, {"name": "object"}]
}))

将对象推送到数组的开头

this.setState(prevState => ({
  myArray: [ {"name": "object"}, ...prevState.myArray]
}))

您根本不应该运行状态。至少不是直接。如果要更新阵列，则需要执行以下操作。

var newStateArray = this.state.myArray.slice();
newStateArray.push('new value');
this.setState(myArray: newStateArray);

直接在状态对象上工作是不可取的。您还可以查看React的不变性助手。

https://facebook.github.io/react/docs/update.html

您可以使用.concat方法使用新数据创建数组的副本：

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

但要注意.concat传递数组时方法的特殊行为- [1, 2].concat(['foo', 3], 'bar')会导致[1, 2, 'foo', 3, 'bar']。

该代码对我有用：

fetch('http://localhost:8080')
  .then(response => response.json())
  .then(json => {
  this.setState({mystate: this.state.mystate.push.apply(this.state.mystate, json)})
})

React-Native

如果您还希望您的UI（即您的flatList）是最新的，请使用PrevState：在下面的示例中，如果用户单击该按钮，它将向列表（在模型和UI中）添加一个新对象）

data: ['shopping','reading'] // declared in constructor
onPress={() => {this.setState((prevState, props) => {
return {data: [new obj].concat(prevState.data) };
})}}. 

通过以下方式，我们可以检查和更新对象

this.setState(prevState => ({
    Chart: this.state.Chart.length !== 0 ? [...prevState.Chart,data[data.length - 1]] : data
}));

在这里，您不能将对象推入这样的状态数组。您可以按自己的方式在常规数组中进行推送。在这里，您必须设置状态，

this.setState({ 
     myArray: [...this.state.myArray, 'new value'] 
})

如果您只是想像这样更新状态

   handleClick() {
        this.setState(
{myprop: this.state.myprop +1}
        })
    }

考虑这种方法

   handleClick() {
        this.setState(prevState => {
            return {
                count: prevState.count + 1
            }
        })
    }

基本上prevState正在为我们编写this.state。