ReactJS - 将 json 推入状态数组

IT技术 javascript arrays json reactjs ecmascript-6
2021-05-10 11:39:36

我只是想将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 数组中推送一个对象？

3个回答

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

在push返回数组的新长度，这意味着一个数字，它的手段不是你想设置什么state.list。这就是它不起作用的原因。

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

来自文档：setState()不会立即变异，this.state而是创建一个挂起的状态转换。this.state调用此方法后访问可能会返回现有值。这就是为什么您在控制台中获得空数组的原因。

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

this.state是不可变的，只能通过setState()函数进行更改。

从文档：

永远不要直接改变 this.state，因为之后调用 setState() 可能会替换你所做的改变。将 this.state 视为不可变的。setState() 不会立即改变 this.state 而是创建一个挂起的状态转换。调用此方法后访问 this.state 可能会返回现有值。

因此，执行此操作的最佳方法是将数组替换this.state为新数组，而不是尝试推送/修改它。

var newState = Object.assign({}, this.state); // Clone the state obj in newState
newState[arrayKey].push(newItem);             // modify newState
this.setState(newState);                      // setState()

Array.prototype.push() 返回调用该方法的对象的新长度属性。

请参阅：https : //developer.mozilla.org/en/docs/Web/JavaScript/Reference/Global_Objects/Array/push#Returns

其它你可能感兴趣的问题
上一篇react.js 使用 javascript 更改输入值 下一篇使用 react-bootstrap-typeahead 产生 CSS 错误