javascript - Push方法将数组转换为组件状态中的数字

Question

我有一个数字数组存储在组件的状态中，我正在尝试在 componentDidMount 方法的计时器内使用 setState 推送另一个数字以查看它在屏幕上如何变化。但是当计时器完成时，现有数组将被我在 Push 方法中作为参数传递的数字替换，而不是将其附加到数组中。

class Foo extends React.Component {
    constructor(props){
        super(props);
        this.state = {
            array : [1,2,3,4,5]
        }
    }

    componentDidMount(){
        setTimeout(()=>this.setState(prevState=>({
            array: prevState.array.push(6),
        })), 5000)
    }

    render(){
        const newArray = this.state.array;
        return(
            <div>{newArray}</div>
        );
    }
}

ReactDOM.render(<Foo />,document.getElementById('root'));

我可以使用展开运算符而不是推送来使其工作，但现在我想知道为什么它不能与推送一起工作。

Answer 1

Array.prototype.push 在推送项目后返回数组的长度，这就是为什么你会得到意外结果，你应该使用 Array.prototype.concat 代替添加元素后返回一个新数组

  setTimeout(()=>this.setState(prevState=>({
        array: prevState.array.concat(6),
  })), 5000)