Реакция - прохождение реквизита

Question

В настоящее время выдает ошибку, в которой говорится, что isCompleted не определено.

todo.isCompleted = todo.isCompleted?false: true;

Приведенный выше код вызывает ошибку.

Совет, который я получаю, - это пропустить todoIndex prop в App.js при рендеринге компонента Todo.

Не уверен, как это сделать.Есть указатели?

import React, { Component } from 'react';
import './App.css';
import ToDo from './components/ToDo.js';

class App extends Component {
 constructor(props) {
   super(props);
    this.state = {
     todos: [
       { description: 'Walk the cat', isCompleted: true },
       { description: 'Throw the dishes away', isCompleted: false },
       { description: 'Buy new dishes', isCompleted: false }],
     newTodoDescription: ''
  };
}

deleteToDo(deleteToDo) {
  console.log(this);
  let newToDos = this.state.todos.filter((todo) => {
    return todo !== deleteToDo
  } )
  this.setState({ todos: newToDos });
}

handleChange(e) {
 this.setState({ newTodoDescription: e.target.value })
}

handleSubmit(e) {
  e.preventDefault();
  if (!this.state.newTodoDescription) { return }
  const newTodo = { description: this.state.newTodoDescription, isCompleted: false };
  this.setState({ todos: [...this.state.todos, newTodo], newTodoDescription: '' });
}

toggleComplete(index) {
  const todos = this.state.todos.slice();
  const todo = todos[index];
  todo.isCompleted = todo.isCompleted ? false : true;
  this.setState({ todos: todos });
}


render() {
 return (
  <div className="App">
    <ul>
    { this.state.todos.map( (todo, index) =>
      <ToDo key={ index } description={ todo.description } isCompleted={ todo.isCompleted } toggleComplete={ this.toggleComplete.bind(this) } deleteToDo={() => this.deleteToDo(todo)} />

    )}
    </ul>
    <form onSubmit={ (e) => this.handleSubmit(e) }>
     <input type="text" value={ this.state.newTodoDescription } onChange={ (e) => this.handleChange(e) } />
     <input type="submit" />
   </form>
  </div>
);
}
}

export default App;

ToDo.js

import React, { Component } from 'react';

class ToDo extends Component {

  toggleComplete = () => {
    this.props.toggleComplete(this.props.todoIndex)
  }

  render() {

    return (

    <ul>
     <input type= "checkbox" checked= { this.props.isCompleted } 
    onChange= { this.handleToggleClick.bind(this)} />
     <span>{ this.props.description }</span>
     <button onClick={ this.props.deleteToDo }> X </button>
  </ul>

  );
 }
}
export default ToDo;

Answer 1

Чтобы передать индекс компоненту ToDo, добавьте еще один объект:

<ToDo key={index} todoIndex={index} ... />

и убедитесь, что компонент вызывает toggleComplete с этим параметром индекса, т.е.

class ToDo extends React.Component {
  toggleComplete() {
    this.props.toggleComplete(this.props.todoIndex)
  }
}

Кроме того, вы изменяете объект todo в своей функции toggleComplete вместо:

todo.isCompleted = todo.isCompleted ? false : true;

Лучше сделать это:

const todos[index] = {...todo, isCompleted: !todo.isCompleted }

Или с помощью Object.assign:

const todos[index] = Object.assign({}, todo, {isCompleted: !isCompleted})

Я думаю, что ответ Макса Курца также верен, привязка this кажется проблематичной.Свяжите функцию toggleComplete в конструкторе или используйте функции стрелок, чтобы убедиться, что this не кусает вас.