React.js报错TypeError: toggleTask is not a function问题求助

问题排查结果 #

你代码里共有3处语法/传参错误，修改后即可正常运行：

• 错误1：toggleTask 方法中 setTasks 调用错误
  App.js里的toggleTask函数，你写的是setTasks()(newTasks)，属于调用语法错误，应该改为setTasks(newTasks)。
  修正后的代码：

  function toggleTask(id) {
    const newTasks = [...tasks]
    const task = newTasks.find(task => task.id === id)
    task.complete = !task.complete
    setTasks(newTasks) // 去掉多余的括号
  }
  

• 错误2：父子组件prop命名不一致
  App组件给Tasklist传递的prop叫toggleTask，但是Tasklist组件接收的时候命名成了toggleTasks（多了末尾的s），同时Tasklist给Task组件传递的prop也错写为toggleTasks，而Task组件接收的参数是toggleTask，导致点击复选框时找不到对应的方法触发报错。
  修正Tasklist.js代码即可：

  import React from 'react'
  import Task from './Task'
  
  export default function Tasklist({ tasks, toggleTask }) { // 把toggleTasks改为toggleTask
      return (
          tasks.map(task => {
              return <Task key={task.id} toggleTask={toggleTask} task={task} /> // 把toggleTasks改为toggleTask
          })
      )
  }
  

• 错误3：uuid方法未调用
  添加任务的逻辑里，你给新任务的id赋值为uuidv4，但是uuidv4是函数，必须调用才会生成唯一id字符串，应该改为uuidv4()。
  修正App.js里的handleAddTask代码：

  function handleAddTask(e){
    const name = taskNameRef.current.value
    if (name === '') return
    setTasks(prevTasks => {
      return [...prevTasks, {id: uuidv4(), name: name, complete: false}] // 给uuidv4加调用括号
    })
    taskNameRef.current.value = null
  }
  

内容的提问来源于stack exchange，提问作者skowi