setState无法正确更新状态

Question

抱歉，我真的很想念React中子组件state内部的传递props。

我已经实现了一个包含3个组件的待办事项列表。

有一个Form组成部分和一个ListTodo组成部分。状态仅存储在App组件中。

import React, {Component} from 'react';
import './App.css';

class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            tasks: ["un truc", "autre truc"]
        };
        this.addTask = this.addTask.bind(this);
    }

    addTask(task) {
        this.setState({
            tasks: this.state.tasks.push(task)
        })
    }

    render() {
        return (
            <div className="App">
                <Form onTaskAdded={ this.addTask }></Form>
                <ListTodo tasks={ this.state.tasks }></ListTodo>
            </div>
        );
    }
}

class Form extends Component {

    constructor(props) {
        super(props);
        this.state = {
            task: ""
        }

        this.handleChange = this.handleChange.bind(this);
        this.addTask = this.addTask.bind(this);
    }

    handleChange(event) {
        this.setState({
            task: event.target.value
        });
    }

    addTask(event) {
        this.props.onTaskAdded(this.state.task);
        event.preventDefault();
    }

    render() {
        return (
            <form onSubmit={ this.addTask }>
                <input placeholder="À faire" onChange={ this.handleChange }></input>
                <input type="submit"></input>
            </form>
        )
    }
}

class ListTodo extends Component {

    render() {
        const tasks = this.props.tasks.map((t, i) => (
                <li key={i}>{t}</li>
            ))

        return (
            <ul>{tasks}</ul>
        )
    }
}

export default App;

显示器起步不错，因此ListTodo可以看到道具tasks。但是在提交表单后，我收到了以下错误ListTodo.render：

TypeError：this.props.tasks.map不是函数

当我console.log时this.props.tasks，我没有得到我的数组，而是数组的长度。

你知道为什么吗？

编辑 ：谢谢大家的回答，你是对的。我错过了Array.push的行为。

但是React似乎仍然很奇怪。如果我让错误的代码 this.setState({tasks:this.state.tasks.push(task)})

然后console.log(JSON.stringify(this.state))显示：

{"tasks":["un truc","autre truc","aze"]}。

无法令人信任的console.log非常令人不安…

Answer 1

根据MDN DOC：

push（）方法将一个或多个元素添加到数组的末尾，并 返回该 数组 的新长度 。

Array.push从不返回结果数组，它返回数字，因此在添加第一个任务后this.state.tasks成为数字，并且尝试在数字上运行map时会引发错误。

您在这里犯了错误：

addTask(task) {
    this.setState({
        tasks: this.state.tasks.push(task)
    })
}

这样写：

addTask(task) {
    this.setState( prevState => ({
        tasks: [...prevState.tasks, task]
    }))
}

这里的另一项导入是，新状态将取决于先前的状态值，因此this.state，使用updater函数而不是在setState内部使用。

有关编辑部分的说明：

那里发生了两个重要的事情：

1- setState是异步的，因此在setState之后，我们可以期待更新后的状态值。

选中此项以获取有关 setState异步行为的 更多详细信息。

2-
Array.push总是通过将项目推入其中来使原始数组发生变化，因此您可以直接通过改变状态值this.state.tasks.push()。

检查 DOC 以获取有关setState的更多详细信息。

检查 MDN文档 中的spread operator (...)。

检查以下代码段：

let a = [1,2,3,4];



let b = a.push(5);  //it will be a number



console.log('a = ', a);



console.log('b = ', b);