reactjs 我有未捕获(在承诺中)语法错误:意外的标记“〈”,“〈!DOCTYPE..."不是有效的JSON [已关闭]

kgsdhlau  于 2022-12-03  发布在  React
关注(0)|答案(1)|浏览(720)

Closed. This question needs debugging details . It is not currently accepting answers.

Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem . This will help others answer the question.
Closed 1 hour ago.
Improve this question
Uncaught (in promise) SyntaxError: Unexpected token '<', "<!DOCTYPE "... is not valid JSON await (async) (anonymous) @ Notes.js:11 commitHookEffectListMount @ react-dom.development.js:23150 commitPassiveMountOnFiber @ react-dom.development.js:24926 commitPassiveMountEffects_complete @ react-dom.development.js:24891 commitPassiveMountEffects_begin @ react-dom.development.js:24878 commitPassiveMountEffects @ react-dom.development.js:24866 flushPassiveEffectsImpl @ react-dom.development.js:27039 flushPassiveEffects @ react-dom.development.js:26984 (anonymous) @ react-dom.development.js:26769 workLoop @ scheduler.development.js:266 flushWork @ scheduler.development.js:239 performWorkUntilDeadline @ scheduler.development.js:533
notes.js

import React, { useContext,useEffect } from 'react'
import NoteContext from '../context/NoteContext'
import AddNote from './AddNote'
import NoteItem from './NoteItem'
// import cors from 'cors'
const Notes = () => {
    const context = useContext(NoteContext);
    const { notes, getNotes } = context;
    useEffect(() => {
        // getNotes(cors())
        getNotes()
    })
    return (
        <>
            <AddNote />
            <div className="row">
                <h3>Your Notes</h3>
                {notes.map((note) => {
                    return <NoteItem key={note._id} note={note} />
                })}
            </div>
        </>
    )
}

export default Notes;

notestate.js

import NoteContext from "./NoteContext";
import { useState } from "react";

const NoteState = (props) => {
  const host = "http://localhost:8000/api/notes"
  const notesInitial = []
  const [notes, setNotes] = useState(notesInitial)


  // Get all Notes
  const getNotes = async () => {
    // API Call
    const response = await fetch(`${host}/fetchallnotes`,
      {
        method: 'GET',
        headers: {
          'auth-token': 'eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiNjM3YzRiY2I1MGNhZDA5YTI0ZTY5MWQ1In0sImlhdCI6MTY2OTg1MzA1NH0.LjVz0RmQA5cFsiIbK3VZyELH8--YtpBlL_ccmwCMxfQ',
          'Content-Type': 'application/json'
        }
      })
    // convert json to text
    // const json = await
    // console.log(json)
    console.log(await response.json());
  }


  // Add a Note
  const addNote = async (title, description, tag) => {
    // TODO: API Call
    // API Call
    const response = await fetch(`${host}/addnote`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        "auth-token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiNjM3YzRiY2I1MGNhZDA5YTI0ZTY5MWQ1In0sImlhdCI6MTY2OTg1MzA1NH0.LjVz0RmQA5cFsiIbK3VZyELH8--YtpBlL_ccmwCMxfQ"
      },
      body: JSON.stringify({ title, description, tag })
    });
    console.log("Adding a new note")
    const note = {
      "_id": "61322f119553781a8ca8d0e08",
      "user": "6131dc5e3e4037cd4734a0664",
      "title": title,
      "description": description,
      "tag": tag,
      "date": "2021-09-03T14:20:09.668Z",
      "__v": 0
    };
    setNotes(notes.concat(note))
  }


  // Delete a Note
  const deleteNote = (id) => {
    // TODO: API Call
    console.log("Deleting the note with id" + id);
    const newNotes = notes.filter((note) => { return note._id !== id })
    setNotes(newNotes)
  }


  // Edit a Note
  const editNote = async (id, title, description, tag) => {
    // API Call
    const response = await fetch(`${host}/updatenote/${id}`, {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        "auth-token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJ1c2VyIjp7ImlkIjoiNjM3YzRiY2I1MGNhZDA5YTI0ZTY5MWQ1In0sImlhdCI6MTY2OTg1MzA1NH0.LjVz0RmQA5cFsiIbK3VZyELH8--YtpBlL_ccmwCMxfQ"
      },
      body: JSON.stringify({ title, description, tag })
    });
    const json = response.json();

    // Logic to edit in client
    for (let index = 0; index < notes.length; index++) {
      const element = notes[index];
      if (element._id === id) {
        element.title = title;
        element.description = description;
        element.tag = tag;
      }

    }
  }

  return (
    <NoteContext.Provider value={{ notes, addNote, deleteNote, editNote, getNotes }}>
      {props.children}
    </NoteContext.Provider>
  )

}
export default NoteState;

port of react router is 3000 and port of backend is 8000
help me solve this error

agxfikkp

agxfikkp1#

这不是一个真正的答案,但太大了,无法进行注解。从错误消息中可以看出,问题是response.json()失败,因为response不是JSON。
是请求被拒绝还是响应处理失败?看起来是后者。
你能试着用下面的方法测试响应吗?(但是你不会用then,只是测试await的响应。
您现在没有检查响应。如果您不喜欢这个代码示例,MDN页面可能会有帮助,也可以查看标题为“Headers”的部分下的最后一个块。(它没有锚,因此无法直接链接到页面的该部分)。

.then( response => {
       if ( !response.ok ) {
         throw new Error( 'Network response was not ok.' );
       } else {
         const contentType = response.headers.get('content-type');
         if (!contentType ) {
           throw new TypeError("No content-type in header.");
         } else if ( contentType.includes('application/json') ) {
           return response.json();
         } else if ( contentType.includes('text/html') ) {
           return response.text();
         } else {
           throw new TypeError("Invalid content-type.");
         }
       }
  ...
  })

相关问题