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