Javascript 在状态为的数组中存储项

所以我有一个textarea，我想将textarea的项目存储在我在应用程序状态中创建的数组中。昨天代码运行得很好，但我想我只是在事故中做了一些修改，出现了这个错误

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

tasks.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

从“React”导入React
类任务扩展了React.Component{
建造师（道具）{
超级（道具）
此.state={
值：“”，
}
}
handleChange=e=>{
this.setState（{value:e.target.value}）
}
render（）{
返回(
this.props.onClick（this.state.value）}>addtask
)
}
}
导出默认任务

app.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;

从“React”导入React；
从“/Tasks.js”导入任务；
导入“/App.css”；
类应用程序扩展了React.Component{
状态={
托多利斯特：[]
}
添加数据（val）{
this.setState（{todolist:this.state.todolist.concat（val）}）
console.log（this.state.todolist）
}
render（）{
返回(
this.addData（value）}/>
);
}
}
导出默认应用程序；

---

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

我认为你需要将“addData”作为道具从应用程序传递给孩子，然后将其放在handleChange上 但您在任务中将其定义为onClick事件

加 和任务句柄更改添加

---

this.props.addData（e.target.value）

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

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

---

您正在使用“（值）”在箭头函数中调用

addData

函数，而不是将其传递给

而不是

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

      </div>

    );

选择2 由于arrow函数不像普通函数那样具有独立的

this

上下文，因此我们可以将addData从函数声明更改为arrow函数表达式

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={this.addData} />
        </div>
      );
    }
}

类应用程序扩展了React.Component{
状态={
托多利斯特：[]
}
addData=（val）=>{
this.setState（{todolist:this.state.todolist.concat（val）}）
console.log（this.state.todolist）
}
render（）{
返回(
);
}
}

您应该查看针对chrome的React-Dev工具扩展

---

通过console.log使用React Dev工具检查组件状态要容易得多。

正如您所知，javascript以异步方式运行，因此它不会等待

this.setState（）

完成，然后传递到

console.log（）

。 您必须强制它等待状态设置

为此，您可以使用

async await

如：

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

读这个

对setState的调用是异步的-不要依赖this.state在调用setState后立即反映新值

---

显示什么错误？如果它能工作，并且你认为你已经破坏了它，我强烈建议你以后开始使用一些版本控制软件（例如git）来避免这种情况。我已经删除了我现在不使用的组件，并且不再显示任何错误。但是，在第一次单击时，数组中没有任何内容。这是有效的！然而，我不太明白为什么：'）请你详细解释一下好吗？如果你在谷歌上搜索“setstate async”，有很多关于它的文章可以比我更好地解释它。

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={this.addData} />
        </div>
      );
    }
}

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