Objects are not valid as a React child (found: [object Promise]). If you meant to render a collectio-CodePudding

I am doing an online diary and get problems with fetching inside jsx component. I have 2 requests. First for fetching lessons and its returns dates and ids of lessons. And second that fetching marks in this lessons but second return [object Promise] but fetch is ok. So how I can get normal data(not a [object Promise]?

const [marks, setMarks] = useState([])
const [lessons, setLessons] = useState([])
const [loading, setLoading] = useState(true)

const getLessons = async(subjectID) => {
  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 => data.json())
  setLessons(res.data.getSubjectLessons)
  getAllMarks(res.data.getSubjectLessons);
  console.log(res.data.getSubjectLessons)
}
const getMark = async(pupilID, lessonID) => {
  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 => 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) => {
    return setMarks(lessons.map(el => {
        return ( <th> {
            getMark(p.pupilID, el.id)
          } </th>)
        }))
    }
    useEffect(() => {
      getLessons(p.subjectID);

      setLoading(false);
    }, [])

CodePudding user response：

You are using async/await and .then() improperly in some places. Try this way:

const [marks, setMarks] = useState([])
const [lessons, setLessons] = useState([])
const [loading, setLoading] = useState(true)

const getLessons = async(subjectID) => {
  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) => {
  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) => {
    return setMarks(lessons.map(el => {
        return ( <th> {
            getMark(p.pupilID, el.id)
          } </th>)
        }))
    }
    useEffect(() => {
      getLessons(p.subjectID);

      setLoading(false);
    }, [])

CodePudding user response：

if you are using async and await then dont use .then syntax try to do like this

const getLessons = async (subjectID) => {
  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);
};

or simply you can use third party library like axios install it with npm or yarn with following command npm i axios or yarn add axios and try it like this

const getLessons = async (subjectID) => {
  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);
};

or make sure that you are not passing object in jsx.