javascript - ReactJS - 将 json 插入状态数组

Question

我只是想将动态创建的 json 附加到位于 state 内的 array 中。 到目前为止，我发现的唯一方法是使用 concat，因为推送不起作用。

    constructor() {
        super()
        this.state = {
            list: []
        }
        this.add = this.add.bind(this)
    }

    add(e) {
        e.preventDefault()
        var task = document.getElementById('task').value
        var json = JSON.parse(JSON.stringify({key: task, item: task}))
        this.setState({list: this.state.list.concat(json)}) // WORKS
        // this.setState({list: this.state.list.push(json)}) // DOESN'T WORK

        console.log(this.state.list)
        document.getElementById('task').value = ''

    }

这行得通，但我不明白为什么在创建第一个项目后控制台中有一个空数组。我已经阅读了 concat 的工作原理，但显然我错过了一些东西。为什么我不能将对象放入 this.list 数组？

Answer 1

concat否则创建一个新数组并返回它。

push返回数组的新长度，这意味着一个数字，这意味着不是您要设置到state.list 的内容。这就是它不起作用的原因。

why I have an empty array in console

From the docs : setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。调用此方法后访问 this.state 可能会返回现有值。这就是您在控制台中得到空数组的原因。

还有一件事，不要直接改变你的state。如果您调用 state.list.push(...)，您的更改将不会被 React 维护，如果您稍后调用 setState，您的更改将被丢弃。所以使用concat是一件好事。