javascript - 在状态数组中存储项目

Question

所以我有一个文本区域，我想将文本区域的项目存储在我在应用程序状态中创建的数组中。昨天代码运行得非常好，但我想我只是在事故中更改了一些东西，然后出现了这个错误。

代码收集文本区域内的值，然后每当我单击按钮时使用函数将数组的项目与文本区域中写入的值连接起来。有 app.js 和具有文本区域和按钮的 tasks.js。

任务.js:

import React from 'react'


class Tasks extends React.Component {

    constructor(props) {
        super(props)
        this.state = {
            value: '',            
        }
    }
    handleChange = e => {
        this.setState({ value: e.target.value })
    }

    render() {
        return (<div>
            <textarea value={this.state.value} onChange={this.handleChange} ></textarea>
            <button onClick={() => this.props.onClick(this.state.value)}>Add task</button>
        </div>)

    }

}



export default Tasks

应用程序.js:

import React from 'react';
import Tasks from './tasks.js';
import './App.css';




class App extends React.Component {
  state = {
    todolist: []
  }

  addData(val) {
    this.setState({todolist:this.state.todolist.concat(val)})
    console.log(this.state.todolist)
  }


  render() {
    return (
      <div className="App">
        <Tasks onClick={value => this.addData(value)} />

      </div>

    );
  }
}



export default App;

当我添加第一个数组元素时出现错误，而不是存储项目。然后，当我添加第二个元素时，数组存储第一个元素。当我添加第三个元素时，数组现在只包含第一个和第二个元素。我知道这是因为我在控制台中看到过它

Answer 1

您的原始问题有一个错误，您已通过该编辑更正了该错误。现在唯一悬而未决的问题是setState maybe an async operation ，所以你需要使用它的回调来检查它更新后的状态。

addData(val) {
  this.setState({
    todolist: this.state.todolist.concat(val)
  }, () => console.log(this.state.todolist))
}