"TypeError: toggleTask is not a function" in react.js

Question

我在 React.js 开始了我的第一个项目，我正在按照 youtube 上的教程学习一些基础知识。我马上就解决了我的问题，但是这次我从昨天开始就什么也做不了了。

我正在显示下面的代码，有什么问题吗？为什么会出现该错误？谢谢。

这是App.js 代码:

import React, { useState, useRef, useEffect } from "react";
import Tasklist from "./Tasklist";
import { v4 as uuidv4 } from 'uuid';

const LOCAL_STORAGE_KEY = 'taskApp.tasks'

function App() {
  const [tasks, setTasks] = useState ([]) 
  const taskNameRef = useRef()

  useEffect(() => {
    const storedTasks = JSON.parse(localStorage.getItem(LOCAL_STORAGE_KEY))
    if (storedTasks) setTasks(storedTasks)
  }, [])

  useEffect(() => {
    localStorage.setItem(LOCAL_STORAGE_KEY, JSON.stringify (tasks))
  }, [tasks])
  

  function toggleTask(id) {
    const newTasks = [...tasks]
    const task = newTasks.find(task => task.id === id)
    task.complete = !task.complete
    setTasks()(newTasks)
  }

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

  return (
    <>
      <Tasklist tasks={tasks} toggleTask={toggleTask} />
      <input ref={taskNameRef} type="text"/>
      <button onClick={handleAddTask}>Add task</button>
      <button>Clear completed</button>
      <div>0 tasks left.</div>
    </>
  )
}

export default App;

这是 Task.js 代码，问题从这里开始：

import React from 'react'

export default function Task({ task, toggleTask }) {
    function handelTaskClick() {
    toggleTask(task.id)
    }

    return (
        <div>
            <label>

                <input type='checkbox' checked={task.complete} onChange={handelTaskClick} ></input>
                {task.name}

            </label>
        </div>
    )
}

Tasklist.js 代码:

import React from 'react'
import Task from './Task'

export default function Tasklist({ tasks, toggleTasks }) {
    return (
        tasks.map(task => {
            return <Task key={task.id} toggleTasks={toggleTasks} task={task} />
        })
    )
}

Answer 1

toggleTask 被传递给 TaskList，但 TaskLists 不会解构它，而是解构 toggleTasks prop，带有一个“s”。 TaskList 然后将 toggleTasks 传递到 Task，在那里它（ 正确地 ）尝试解构 toggleTask.

一致地命名传递的 toggleTask prop.

<Tasklist tasks={tasks} toggleTask={toggleTask} />

...

function Tasklist ({ tasks, toggleTask }) {
  return (
    tasks.map(task => {
      return <Task key={task.id} toggleTask={toggleTask} task={task} />
    })
  )
}

...

function Task ({ task, toggleTask }) {
  function handelTaskClick() {
    toggleTask(task.id);
  }

  return (
    <div>
      <label>
        <input type='checkbox' checked={task.complete} onChange={handelTaskClick} />
        {task.name}
      </label>
    </div>
  )
}

"TypeError: toggleTask is not a function" in react.js

"TypeError: toggleTask is not a function" in react.js

html

javascript

web-applications

reactjs