React Hooks Todo App 'TypeError: Object(...) is not a function' 错误

Question

I'm developing a Todo App with React Hooks. I get the error "TypeError: Object (...) is not a function" when defining the functional component.

React version: 16.7.0

Here is the error:

  1 | import React, { useState } from "react"
  2 | import "./App.css"
  3 | 
> 4 | export default function TodoApp() {
  5 |   const [todo, setTodo] = useState("")
  6 |   const [todos, setTodos] = useState([])
  7 | 

And my code:

import React, { useState } from "react"
import "./App.css"

export default function TodoApp() {
  const [todo, setTodo] = useState("")
  const [todos, setTodos] = useState([])

  const handleChange = (e) => {
    setTodo(e.target.value)
  }

  const addTodo = () => {
    setTodos([
      ...todos,
      {
        id: todos.length + 1,
        title: todo,
        isDone: false
      }
    ])
  }

  continued...

Answer 1

You seem to have a mistake inside the addTodo function. If your current state depends on the previous state you have to pass a function instead to setTodos to avoid bugs. Try this:

const addTodo = () => {
    setTodos(prevTodos => [
      ...prevTodos,
      {
        id: prevTodos.length + 1,
        title: todo,
        isDone: false
      }
    ])
  }