Question

我想用React制作一个简单的待办事项应用程序。出于某种原因每次尝试我尝试切换todo元素isCompleted状态我得到一个错误：

TypeError：无法读取属性＆＃39; isCompleted＆＃39; undefined - React simple todo app

反应调试器高亮显示第37行和第41行。老实说，我无法找到它无法工作的原因，看起来像toggleTodo中的setState会破坏某些东西。

import React, { Component } from 'react';

const Input = (props) => {
  return (
    <form onSubmit={props.addTodo}>
      <input placeholder="What needs to be done?" value={props.newTodo} className="new-todo" type="text" onChange={props.handleChange} />
      <input type="submit" value="Submit" />
    </form>
  );
}

const TodoListTable = props => {
  return (
    <ul className="todo-list">
      {props.todoList.map((item, index) => {
        return (
          <li key={index} id={index}>
            <button className="toggleTodo" onClick={props.toggleTodo}>
              {item.isCompleted ? "(X)" : "( )"}
            </button>
            <span className="textTodo">{item.text}</span>
            <button className="deleteTodo" onClick={props.removeTodo}>
              X
            </button>
          </li>
        );
      })}
    </ul>
  );
};
const FilterListTable = props => {
  return <ul className="filters">
      <li>
        <a href="#/">All</a>
      </li>
      <li>
        <a href="#/active">Active</a>
      </li>
      <li>
        <a href="#/completed">Completed</a>
      </li>
    </ul>;
};

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
    newTodo: "",
    todoList: [
      { text: "zrobić pranie", isCompleted: false },
      { text: "zrobić lunch", isCompleted: true },
      { text: "zrobić pranie", isCompleted: false }
    ]
   }
  }

  handleChange = event => {
    this.setState({ newTodo: event.target.value });
  };
  addTodo = event => {
    event.preventDefault();
    this.setState(prevState => ({
      newTodo: "",
      todoList: [...prevState.todoList, { text: this.state.newTodo }]
    }));
  };
  editTodo = event => {
    // event.preventDefault();
    // console.log(this.state.todoList);
  };
  toggleTodo = event => {
    event.preventDefault();
    let todoId = event.target.parentNode.id;
    console.log(todoId);
    this.setState(prevState => ({
       todoList: prevState.todoList.map((number, i) => {
       })
    }));
  };
  removeTodo = event => {
    event.preventDefault();
    let todoId = event.target.parentNode.id;
    console.log(todoId);
    this.setState(prevState => ({
      todoList: prevState.todoList.filter((number, i) => i != todoId)
    }));
  };
  render() {
    return (
      <div className="todoapp">
        <h1>React Todo</h1>
        <Input addTodo={this.addTodo} handleChange={this.handleChange} />
        <TodoListTable
          todoList={this.state.todoList}
          toggleTodo={this.toggleTodo}
          removeTodo={this.removeTodo}
        />
        <hr />
        <FilterListTable />
        <br />
      </div>
    );
  }
}

export default App;

Answer 1

在int f(double i) { cout<<"b"; return 1; }函数中，您还需要在toggleTodo函数中返回已更新的todoList

检查toggleTodo功能

toggleTodo

<强> working sandbox

TypeError：无法读取属性＆＃39; isCompleted＆＃39;未定义的 - React简单的待办事项应用程序

1 个答案: