Обновить свойство определенного объекта внутри массива в состоянии - PullRequest
Новая
       31

Обновить свойство определенного объекта внутри массива в состоянии

0 голосов
/ 26 ноября 2018

Я пытаюсь обновить свой код: https://repl.it/@colegonzales1/HeftyJoyfulAbilities

Я пытаюсь заставить мою функцию handleToggle работать правильно.Сейчас ничего не изменится, но я провел последние 2-3 часа, пытаясь заставить его работать, насколько мне известно, но я не могу понять, как получить доступ к определенному элементу в состоянии.Я знаю, как все это перезаписать, но это не то, чем я хочу заниматься.Допустим, у меня есть: 

this.state = {
  todos: [
    {
      title: 'Wash car',
      id: 1,
      done: false
    },
    {
      title: 'Go shopping',
      id: 2,
      done: false
    }
  ],
  inputValue: ''
}

Как я могу ТОЛЬКО изменить значение «сделано» в задаче «Перейти к покупкам» на true?

Ответы [ 2 ]

0 голосов
/ 26 ноября 2018

Вы можете найти индекс объекта с указанным id с помощью findIndex и создать новый массив с копией этого объекта в нем с переключенным флагом done.

Пример 

class App extends React.Component {
  state = {
    todos: [
      {
        title: "Wash car",
        id: 1,
        done: false
      },
      {
        title: "Go shopping",
        id: 2,
        done: false
      }
    ],
    inputValue: ""
  };

  handleToggle = id => {
    this.setState(prevState => {
      const todos = [...prevState.todos];
      const todoIndex = todos.findIndex(todo => todo.id === id);

      todos[todoIndex] = { ...todos[todoIndex], done: !todos[todoIndex].done };

      return { todos };
    });
  };

  render() {
    return (
      <div>
        <div>{JSON.stringify(this.state)}</div>
        <button onClick={() => this.handleToggle(2)}>
          Toggle todo with id 2
        </button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

<div id="root"></div>
0 голосов
/ 26 ноября 2018

Используйте array.map, чтобы переключать флаг «Готово» только на элементе, который соответствует нажатому идентификатору, следующим образом.Другие свойства задачи копируются с помощью объекта: 

handleToggle (e) {
  const id = parseInt(e.target.id,10)
  this.setState((prevState) => ({
    todos: prevState.todos.map(t => t.id === id ? {...t, done: !t.done} : t)
  })) 
}
...