#reactjs #api #react-hooks
Вопрос:
Я веду онлайн-дневник и получаю проблемы с извлечением внутри компонента jsx. У меня есть 2 просьбы. Во-первых, для извлечения уроков и их дат возврата и идентификаторов уроков. И во-вторых, что выборка отметок в этом уроке, но второе возвращение [обещание объекта], но выборка в порядке. Итак, как я могу получить обычные данные(а не [обещание объекта]?
const [marks, setMarks] = useState([]) const [lessons, setLessons] = useState([]) const [loading, setLoading] = useState(true) const getLessons = async(subjectID) =gt; { var res = await fetch("http://localhost:5002/graphql", { method: "post", headers: { "Content-Type": "application/json", Authorization: "Bearer " localStorage.authToken }, body: JSON.stringify({ query: `query adad { getSubjectLessons(subject:${subjectID}){ id, date }}`, }), }).then(data =gt; data.json()) setLessons(res.data.getSubjectLessons) getAllMarks(res.data.getSubjectLessons); console.log(res.data.getSubjectLessons) } const getMark = async(pupilID, lessonID) =gt; { var res = await fetch("http://localhost:5002/graphql", { method: "post", headers: { "Content-Type": "application/json", Authorization: "Bearer " localStorage.authToken }, body: JSON.stringify({ query: `query adad { getPupilMarksByLesson(lesson: ${lessonID} , pupil:${pupilID}){ mark } }`, }), }).then(data =gt; data.json()) if (res.data.getPupilMarksByLesson !== null) { console.log(res.data.getPupilMarksByLesson.mark) return res.data.getPupilMarksByLesson.mark } else { return res.data.getPupilMarksByLesson } } const getAllMarks = (lessons) =gt; { return setMarks(lessons.map(el =gt; { return ( lt;thgt; { getMark(p.pupilID, el.id) } lt;/thgt;) })) } useEffect(() =gt; { getLessons(p.subjectID); setLoading(false); }, []) Ответ №1:
Вы используете async/await и .then() неправильно в некоторых местах. Попробуй вот так:
const [marks, setMarks] = useState([]) const [lessons, setLessons] = useState([]) const [loading, setLoading] = useState(true) const getLessons = async(subjectID) =gt; { var res = await fetch("http://localhost:5002/graphql", { method: "post", headers: { "Content-Type": "application/json", Authorization: "Bearer " localStorage.authToken }, body: JSON.stringify({ query: `query adad { getSubjectLessons(subject:${subjectID}){ id, date }}`, }), }) var data = await res.json() setLessons(data.getSubjectLessons) getAllMarks(data.getSubjectLessons); console.log(data.getSubjectLessons) } const getMark = async(pupilID, lessonID) =gt; { var res = await fetch("http://localhost:5002/graphql", { method: "post", headers: { "Content-Type": "application/json", Authorization: "Bearer " localStorage.authToken }, body: JSON.stringify({ query: `query adad { getPupilMarksByLesson(lesson: ${lessonID} , pupil:${pupilID}){ mark } }`, }), }) var data = await res.json() if (data.getPupilMarksByLesson !== null) { console.log(data.getPupilMarksByLesson.mark) return data.getPupilMarksByLesson.mark } else { return data.getPupilMarksByLesson } } const getAllMarks = (lessons) =gt; { return setMarks(lessons.map(el =gt; { return ( lt;thgt; { getMark(p.pupilID, el.id) } lt;/thgt;) })) } useEffect(() =gt; { getLessons(p.subjectID); setLoading(false); }, []) Комментарии:
1. нет , мне это не поможет, но тай за помощью
2. @exxxamply Попробуй colsole. регистрируйте данные сразу после их получения.
var data = await res.json(); console.log(data). Вы видите данные?
Ответ №2:
если вы используете асинхронность и ожидание, то не используйте .тогда синтаксис попробуйте сделать так
const getLessons = async (subjectID) =gt; { const res = await fetch('http://localhost:5002/graphql', { method: 'post', headers: { 'Content-Type': 'application/json', Authorization: 'Bearer ' localStorage.authToken, }, body: JSON.stringify({ query: ` query adad { getSubjectLessons(subject:${subjectID}){ id, date }}`, }), }); const data = await res.json(); setLessons(data.getSubjectLessons); getAllMarks(data.getSubjectLessons); console.log(data.getSubjectLessons); }; или просто вы можете использовать стороннюю библиотеку, такую как axios , установить ее с помощью npm или yarn с помощью следующей команды npm i axios или yarn add axios и попробовать сделать это следующим образом
const getLessons = async (subjectID) =gt; { const data = { query: `query adad { getSubjectLessons(subject:${subjectID}){ id, date }}`, }; const config = { 'Content-Type': 'application/json', Authorization: 'Bearer ' localStorage.authToken, }; const { data } = await axios.post( 'http://localhost:5002/graphql', data, config ); setLessons(data.getSubjectLessons); getAllMarks(data.getSubjectLessons); console.log(data.getSubjectLessons); }; или убедитесь, что вы не передаете объект в jsx.