Question

组件->
盒子
Todolist
添加
AddModal
主要组件应用

但是，当我添加新任务时，它不起作用。无法正确添加。

我想我不能在函数中两次使用this.setstate。

希望我是正确的

给出主要组成部分。

App.js：

import React, { Component } from 'react';
import './App.css';
import Box from './Components/Box';
import Add from './Components/Add';
import Todolist from './Components/Todolist';

class App extends Component {

  constructor(props) {
    super(props);
    this.state = {
        lists: '',
        inputValue: '',
        itemArray: []
    }
}

  onAddTask = () => {
    this.setState ({
        lists: this.state.inputValue
    });
    const item = this.state.itemArray;
    const title = this.state.lists;
    item.push({ title  })
    this.setState(prevState => ({
      itemArray: [...prevState.lists, title]
    }))
}

updateInputValue = (event) => {
  this.setState({
    inputValue: event.target.value
  });
}

  render() {

    let length = this.state.itemArray.length;

    return (
      <div className="App">
        <Box createTodo = {
          <div>
            {this.state.itemArray.map((itemArr) => {
              return (
                <div className="box">
                  <Todolist tasks = {itemArr} />
                </div>
              )
            })}
          </div>
          }>
        </Box>
        <Add addTask = {this.onAddTask} inputValues = {this.updateInputValue} inputV = {this.state.inputValue}  />
      </div>
    );
  }
}

export default App;

Answer 1

您的addTasks函数不正确，您正在此处混淆。在inputValue中，您可以从输入字段中保存当前值，对吗？因此，如果您编写以下内容

this.setState({
    lists: this.state.inputValue
});

您将待办事项列表设置为此单个值。而且您的待办事项列表不再是数组。

第二，状态是不可改变的。因此，如果您编写以下内容

this.state.itemArray.push({ title });

状态将不会更新。您真正想要的是以下内容：

onAddTask = () => {
    this.setState({
      itemArray: [...this.state.itemArray, this.state.inputValue]
    })
}

我不确定该州的lists属性是做什么的。除了onAddTask函数之外，您不会在其他任何地方使用它。所以我想您可以删除它。

TODO项目无法正常启动

1 个答案: