Question

是的，我是React的新手，我正在尝试从头开始制作（臭名昭著的）待办应用程序。到目前为止，我只有一个待办事项组件，然后是主应用程序。这是我的代码-首先是Todo组件：

import PropTypes from 'prop-types';

class Todo extends Component {

    static defaultProps = {
        completed: false,
    }

    static propTypes = {
        completed: PropTypes.bool.isRequired,
        // name: PropTypes.string.isRequired,
    }

    constructor(props){
        super(props)

        this.state = {
            completed: false,
        }
    }

    render(){
        return (
            <div>
                {!this.state.completed && <div>
                    <span>{this.props.name}</span>
                    <input type="checkbox" onClick={() => {this.markCompleted()}}/>
                </div>}
            </div>
        )
    }

    markCompleted = () => {
        this.setState((currentState) => {
            return {
                completed: !currentState.completed
            }
        })
    }
}

export default Todo;

然后是主要的App组件...

import React from 'react';
import Todo from './Todo';
import './App.css';

class App extends React.Component {

  constructor(props){
    super(props)
      this.state = {
        todos: [{id: 1, name: 'take out trash'}, {id: 2, name: 'feed the cat'}]
      }
  }

  render(){
    let textInput;
    const todos = this.state.todos.map(todo => <Todo key={todo.id} name={todo.name} completed={todo.completed}/>)
    return (
      <div className="App">
         <input type="text" ref={(el) => {textInput = el}} />
         <button onClick={() => {this.addTodo(textInput.value)}}>Click to Add a Todo</button>
        {todos}
      </div>
    );
  }

  addTodo = (todoName) => {
    const newTodo = {id: this.state.todos.length + 1, name: todoName};
    const todos = this.state.todos.map(todo => <Todo key={todo.id} name={todo.name} completed={todo.completed}/>)
    todos.push(newTodo)
    console.log(this.state.todos);
      this.setState({
        todos
      })
      // console.log(todos)
    }
}

export default App;

所以我有一个难题。在初始渲染时，todos数组的状态映射良好。但是，当我键入一个待办事项并单击按钮以添加待办事项时，其他待办事项的所有名称都消失了，并且仅显示上次推送的待办事项的名称。因此，如果我要添加待办事项“支付账单”，那么“取出垃圾箱”和“喂猫”的复选框仍将可见，但这些待办事项的名称将不再可见。我可以很好地单击复选框以删除待办事项，但我希望我的待办事项数组能够配合使用。我想我也应该使用.filter来正确过滤掉待完成状态标记为true的待办事项。其他名称是否由于我在todoName方法中添加的addTodo参数而消失了？这是否导致所有以前的待办事项名称都未定义？我确实在尝试学习，并且愿意接受所有帮助和改进建议。我要求我们使用已经存在的代码，因为我以前已经看过其他人如何制作待办事项应用程序，并且我不想只复制和观察别人的代码，因为我认为这样做会降低从我的学习中在此先感谢您的帮助！

Answer 1

我对kwargs.keys()类进行了一些更正：

在App中，可以简化它，您可以像下面这样推送状态数组：

addTodo

与渲染相同，您不需要您正在使用的辅助待办事项，只需像您所做的那样映射状态即可。

  addTodo = (todoName) => {
    const newTodo = {id: this.state.todos.length + 1, name: todoName};
      this.setState({
        todos: [...this.state.todos, newTodo]
      })
      console.log(this.state.todos);
    }

我正在制作的这个React to-do应用程序中缺少什么？

1 个答案: