Pu sh метод преобразует массив в число в состоянии компонента

Question

У меня есть массив чисел, хранящихся в состоянии моего компонента, и я пытаюсь использовать pu sh другое число, используя setState внутри таймера в методе componentDidMount, чтобы увидеть, как оно меняется на экране. Но когда таймер завершает работу, существующий массив заменяется на число, которое я передал в качестве параметра в методе pu sh вместо добавления его в массив.

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'));

Я мог бы заставить его работать вместо оператора распространения из pu sh, но теперь я удивляюсь, почему он также не работает с pu sh.

Answer 1

Array.prototype.push возвращает длину массива после нажатия на элемент, поэтому вы получаете неожиданный результат, вместо этого следует использовать Array.prototype.concat, который возвращает новый массив при добавлении элемента

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