时间戳

首页 > 解决方案 > 以状态存储数组中的项目

javascript - 以状态存储数组中的项目

问题描述

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

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

任务.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;

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

标签： javascriptreactjs

解决方案

您最初的问题有一个错误，您已通过该编辑进行了更正。现在唯一悬而未决的问题setState可能是异步操作，因此您需要使用它的回调来检查更新后的状态。

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

推荐阅读