时间戳

首页 > 解决方案 > 将项目添加到状态内的数组时，渲染 React 应用程序不适用

javascript - 将项目添加到状态内的数组时，渲染 React 应用程序不适用

问题描述

我正在努力制作一个用于练习的待办事项应用程序。出于某种原因，当我按下添加按钮时没有任何反应，但是如果我在输入字段上应用“onChange”，则创建的待办事项确实会显示在待办事项列表中。在过去的几个小时里，我一直在努力寻找解决方案，我相信我错过了一些东西......希望有人能弄清楚！

App.js

class App extends Component {
  state = {
    newTask: { id: 0, task: "" },
    tasks: [
      { id: 1, task: "task1" },
      { id: 2, task: "task2" },
      { id: 3, task: "task3" }
    ]
  };

  newTask = e => {
    this.setState({
      newTask: { id: this.state.tasks.length + 1, task: e.target.value }
    });
  };

  addTask = e => {
    this.setState(prevState => {
      prevState.tasks.push(this.state.newTask);
    });
  };

  render() {
    return (
      <div className="App">
        <Header title="Todo List" />
        <Form input={this.newTask} add={this.addTask} />
        <ul>
          {this.state.tasks.map(t => (
            <Tasks task={t.task} key={t.id} />
          ))}
        </ul>
      </div>
    );
  }
}

export default App;

const form = props => {
  return (
    <div>
      <input
        type="text"
        placeholder="Type your task here..."
        onChange={props.input}
      />
      <button onClick={props.add}>Add</button>
    </div>
  );
};

const tasks = props => {
  return <div>{props.task}</div>;
};

标签： javascriptreactjsreact-redux

解决方案

你return在. setState_ addTask因此，您实际上更新了状态，但不触发反应更新生命周期。

我想你可以这样尝试：

addTask = e => {
    this.setState(prevState => {
        return { tasks: [...prevState.tasks, this.state.newTask]};
    });
  };

推荐阅读