TypeError: Failed to execute 'fetch' on 'Window': Invalid name

Question

我正在尝试使用 useContext api 更新我的项目中的待办事项列表，如果我单击输入复选框，我想删除已完成但每当我单击它时都会收到此错误类型错误：无法执行 'fetch' on 'Window': _callee$ 的名称无效，我检查了文件名以查看是否遗漏了某些内容但正确无误。请有人帮我看看这里做错了什么

import { createContext, useState } from "react"

const TodosContext = createContext()

const TodosProvider = ({children}) =>  {

    const [todos, setTodos] = useState([])

    const updatedTodos = async (updateTodo) => {

        try{
            const res = await fetch("/api/updateTodo", {
                method: "PUT",
                body: JSON.stringify(updateTodo),
                headers: {"content-[type]": "application/json"}
            })
            await  res.json()
            setTodos((prevTodo) => {
                const existingTodos = [...prevTodo]
                const existingTodo = existingTodos.find((todo) => todo.id === updateTodo.id)
                existingTodo.fields === updateTodo.fields

                return existingTodos
            })
        } catch(err){
            console.error(err)
        }
    }
  
    return (
        <TodosContext.Provider value={{
            addTodos,
            todos,
            setTodos,
            updatedTodos
        }}
        >
            {children}
        </TodosContext.Provider>
    )
}

export {TodosContext, TodosProvider}

import {TodosContext} from '../context/todoContext'
import { useContext } from "react"


export default function Todo ({todo}){
    const {updatedTodos} = useContext(TodosContext)


    const handleToggle = () => {
        
        const updateFields = {
            ...todo.fields,
            completed: !todo.fields.completed
        }
        const updateTodo = {id: todo.id, fields: updateFields} 
        updatedTodos(updateTodo)
    }

    return (
        <li className="flex items-center py-4 px-4 my-2 bg-white shadow-xl">
            <input type="checkbox" name="completed" id="completed" className="form-checkbox cursor-pointer mr-2 h-5 w-5" checked={todo.fields.completed}
            onChange={handleToggle}
            />
            <p className={`flex-1 text-gray-800 font-semibold ${todo.fields.completed? "line-through" : ""}`}>{todo.fields.description}</p>
        </li>
    )
}

Answer 1

我认为你的 header 无效 headers: {"content-[type]": "application/json"} 应该是 {"Content-Type": “application/json”}，这是导致错误的原因

TypeError: Failed to execute 'fetch' on 'Window': Invalid name

TypeError: Failed to execute 'fetch' on 'Window': Invalid name

reactjs

next.js

use-context