🔥

ReactのStateは置き換える

2023/08/06に公開

ReactのStateは書き換えるのではなく置き換えるようにする。

  const [item, setItem] = useState({})

  // NG
  item.name = 'John'

  // OK
  setItem({
  ...item,
  name: 'John'
});

ReactでTodo Appを作っていて、タスク完了の値をtoggleしたかったのですが
stateを書き換えようとしていてうまくいかずハマったのでメモしておきます。


  const initialTodos = []
  const [todoItems, setTodoItems] = useState(initialTodos)

  function addTodoItem(newTodoItem) {
    setTodoItems([...todoItems, newTodoItem])
  }

  function completeTodoItem(targetTodoId) {
    const localTodos = [...todoItems]
    localTodos.forEach((todo) => {
      if (todo.id === targetTodoId) {
        todo.isCompleted = !todo.isCompleted
      }
    })
    setTodoItems(localTodos)
  }

nextjs-todo-app

demo

GitHubで編集を提案

Discussion