Question

我很想制作一个待办事项以进行练习。由于某些原因，当我按下添加按钮时，什么也没有发生，但是如果我在输入字段上应用“ 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>;
};

Answer 1

您在return的{{1}}函数中没有setState。因此，您实际上是在更新状态，但不会触发反应更新生命周期。

我想你试试这样的东西：

addTask

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

1 个答案: