ReactJS-将JSON推送到状态数组

Question

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

    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。这就是为什么它不起作用。

为什么控制台中有一个空数组

从docs开始：setState()不会立即变异，this.state但会创建待处理的状态转换。this.state调用此方法后进行访问可能会返回现有值。这就是为什么要在控制台中获取空数组的原因。

还有一件事，不要state直接改变您的行为。如果您致电state.list.push(...)，您的更改将不被React保留，并且如果您setState稍后致电将被放弃。因此，使用它是一件好事concat。