数组push的问题

Question

代码：

this.state={
    data:[]
}
this.arr=[]

this.setState({
     data:this.state.data.push(ele)    //此时提示push不是一个方法
})

this.arr.push(ele)    //正常运行

虽然说push返回的是新数组的长度，但是this.arr确可以用push，而this.state.data确不可以用而只能用cancat，这是为什么？

Answer 1

在React的渲染机制中，直接修改状态值不能触发重新渲染，只能通过调用setState的方式执行，这个方法是个异步方法，它将改动放到一个队列中，React会合并这个队列中的所有改动，判断state是否发生改变，从而决定是否需要重新渲染。

对于数组类型的state，比如这里的data. React规定：state中包含的所有状态都应该是不可变对象。这样它在判断状态是否发生变化时就很简单了-只需要判断引用是否一样即可。 而数组的concat方法就是创建了一个全新数组，React这才认为state.data发生变化了。

Answer 2

setState是用来更新State的，而你push也是为了更新数据（实际上这是不允许的，因为更新数据只能用setState）。

试一试这样

this.setState({
    data:[...this.state.data,ele]//setState里面设置新的值应该是赋值，而不是执行相关的函数
})

Answer 3

this.state.data.push(ele) 的返回值是数组长度, 把data数据类型改修为数字了，再次执行这个方法的时候就会报错了

Answer 4

就算让你push成功了 也不会引起视图的更新啊，需要返回一个新的引用