setState返回空对象

Question

我正在研究React，并发现一些与setState混淆的东西。

比方说，我们州的对象具有property（todos）===带有对象的数组。 我创建handleChange函数来更改状态。这是最棘手的部分。

handleChange在'arrPrev'中创建了另一个数组-这是原始状态的克隆（无引用），然后我在'arrPrev'->'+ = 1'中进行了更改，并在handleChange中返回空对象。

为什么渲染'{this.state.todos [0] .text}'中的第二个div更改其数据并重新渲染，但是我返回了上面的空对象，并且没有改变任何状态。

import React from "react"

class App extends React.Component {
    constructor() {
        super()
        this.state = {
            todos: [
                {
                    id: 1,
                    text: "Take out the trash",
                    completed: true
                },
                {
                    id: 2,
                    text: "Grocery shopping",
                    completed: false
                },
                {
                    id: 3,
                    text: "Clean gecko tank",
                    completed: false
                },
                {
                    id: 4,
                    text: "Mow lawn",
                    completed: true
                },
                {
                    id: 5,
                    text: "Catch up on Arrested Development",
                    completed: false
                }
            ]
        }
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(id) {
        this.setState(prevState => {
            let arrPrev = prevState.todos.slice();
            arrPrev[0].text += '1';
            return {}
        })
    }

    render() { 
        return (
            <div className="todo-list">
                <div onClick={this.handleChange}>{this.state.todos[0].id}</div>
                <div>{this.state.todos[0].text}</div>
                <div>{this.state.todos[0].completed}</div>
            </div>
        )    
    }
}

export default App