React-Native-Promises和JSON決議（無異議）

他，

我的代碼出現間歇性問題，有時會出現“未定義”錯誤，這讓我相信 React 正在嘗試在決議 JSON 之前處理 API 請求。誰能指出我正確的方向？如何確保在進行任何處理之前加載所有資料？（我在使用 await 函式時也遇到了同樣的問題，但我很樂意使用其中任何一個）。

JSON

{"session_details [{"session_index":18,"session_uid":"17249351302794706962","session_date":"2022-06-20","session_notes":null,"session_start_time":"Morning"}],
"clothes_items":[{"clothing_id":36,"category":7,"added_date":"2022-01-25","description":"Gap Jeans","view_front":"99621639896956961_frontview.jpg","view_back":null,"view_360":null,...

反應本機代碼：

export function SessionDetails( { route }  ) {
    const { sessionUid } = route.params;

    const [loadingSessionData, setLoadingSessionData] = useState(true);
    const [sessionDetails, setSessionDetails] = useState();
    const [sessionClothes, setSessionClothes] = useState();
    const [sessionGear, setSessionGear] = useState();
    const [sessionTasks, setSessionTasks] = useState();
    const [formattedDate, setFormattedDate] = useState();
    const [currentNote, setCurrentNote] = useState();
    const [saveNotesVisible, setSaveNotesVisible] = useState(false);

function getSessionDetails(sessionUid){
      const url = `${apiUrl}sessions/detail.php?session_uid=${sessionUid}`;
     
      return fetch(url, {
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        }
      }).then((response) => response.json())
    };

    function loadSessionDetails(){
      return Promise.all([getSessionDetails(sessionUid)])
    }

    useEffect(() => {

      setLoadingSessionData(true);
      setSaveNotesVisible(false);

      loadSessionDetails()
        .then(([sessionData]) => {
        
         setSessionDetails(sessionData.session_details[0]);
         setSessionClothes(sessionData.clothes_items);
         setSessionGear(sessionData.gear_items);
         setSessionTasks(sessionData.task_items);
         sessionDetails ? setFormattedDate(moment(sessionData.session_details.session_date).format("dddd, MMMM Do, YYYY.")) : setFormattedDate('There is a problem');
         setCurrentNote(sessionDetails.session_notes);
         setLoadingSessionData(false);
    })

    }, []);

uj5u.com熱心網友回復：

await你的 Promises，而不是then與它們鏈接。
return await Promsise.all([...])
然后獲取資料為
const [data] = loadSessionDetails()

uj5u.com熱心網友回復：

看起來您正在嘗試對回應 JSON 進行陣列解構，但您的示例 JSON 不是陣列。

看看在你的回呼定義中去掉方括號是否有幫助。

即代替

.then(([sessionData]) => {

嘗試

.then((sessionData) => {

uj5u.com熱心網友回復：

如果它可以幫助任何人，這就是我設法解決它的方法：

async function getSessionDetails(sessionUid){
      const $apiUrl = 'https://apihost.com/api';
      const url = `${apiUrl}sessions/detail.php?session_uid=${sessionUid}`;

      return fetch(url, {
        headers: {
          'Content-Type': 'application/json',
          'Accept': 'application/json'
        }
      }).then((response) => response.json())
        .then(data => {
          // proceed to setup state variables based on the response.
          setSessionDetails(data.session_details[0]);
          sessionDetails ? setFormattedDate(moment(data.session_details[0].session_date).format("dddd, MMMM Do, YYYY")) : setFormattedDate('There is a problem');
          setCurrentNote(data.session_details[0].session_notes);
          // disable LoadingScreen
          setLoadingSessionData(false);
          return
      }).catch(error => {
        console.log(error.message);
        // do some more error handling
      })
    };

    async function loadSessionDetails(){
      // sessionUid is passed into the parent component via route.params
      return await Promise.all([getSessionDetails(sessionUid)])
    }

以及呼叫 API 的初始 useEffect：

    useEffect(() => {
      setLoadingSessionData(true);
      loadSessionDetails();
    }, []);

標籤：javascript 反应式 api 异步 承诺

上一篇：撰寫異步安全單例的最佳實踐是什么？

下一篇：如何讓這個NodeJS異步回圈正確執行？