物件作為React子物件無效（找到：[objectPromise]）。如果您打算渲染一組子項，請改用陣列。如何解決

我正在寫在線日記，但在獲取 jsx 組件內部時遇到問題。我有 2 個請求。首先用于獲取課程及其回傳日期和課程 ID。其次，在本課程中獲取分數但第二次回傳 [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);
    }, [])

uj5u.com熱心網友回復：

您正在使用async/await，并.then()在一些地方不正確。試試這個方法：

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);
    }, [])

uj5u.com熱心網友回復：

如果您使用 async 和 await 然后不要使用.then語法嘗試這樣做

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);
};

或者干脆你可以使用第三方庫像愛可信與NPM或紗線安裝使用下面的命令npm i axios或yarn add axios 和嘗試這樣

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);
};

或者確保您沒有在 jsx 中傳遞物件。

標籤：反应 接口 反应钩子

上一篇：如何在aspnetcorewebAPI上正確地將串列轉換為IQueryable

下一篇：MavenMulesoftAnypointstudio調度器