React js function 未被調用

Question

在 react js 中，我從多個 API 獲取數據，我需要一個一個地獲取它們，並且還一個一個地調用一些函數，所以我使用 react state 和 if 語句來使它們工作。 一旦一次獲取或特定的 function 完成，我將更改不同useState變量的 state，但即使更改了 state，功能也不會運行。 整個代碼在另一個 function 中，但我沒有提供。 在fetchData function 中，我想運行函數並同步獲取，但它們沒有運行

let [origData, setOrigData] = useState(null);
let [imageId, setImageId] = useState([]);
let [myItems, setMyItems] = useState([]);
let [finalData, setFinalData] = useState([]);
let [getData, setGetData] = useState(false);
let [itemId, setItemId] = useState(false);

let fetchData = () => {
  fetch('http://127.0.0.1:8000/api/get-order-item/' + sessionStorage.getItem('id'), {
    method: 'GET',
    headers: {
      'Content-Type': 'application/json',
      Authorization: 'Bearer' + ' ' + sessionStorage.getItem('token'),
    },
  })
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      if (data) {
        setMyItems(data);
        setGetData(true);
      }
    });

  if (getData === true) {
    myItems.map((e) => {
      console.log(e);
    });
    setItemId(true);
  }

  if (itemId === true) {
    fetch('http://127.0.0.1:8000/api/data')
      .then((response) => {
        return response.json();
      })
      .then((info) => {
        setOrigData(info);
        console.log('fetch done');
      });
  }
};

Answer 1

React 並不意味着同步運行。 視圖渲染具有優先權，不應被某些與視圖無關的代碼阻塞。 運行視圖阻塞代碼的概念是useEffect 。 你在useEffect 的解釋中得到了使用 APIs 的想法

Answer 2

這不起作用的原因是它依賴於在 function 塊中設置的 state 數據。 當您手頭有第一個響應的數據時，沒有理由需要這個 state 來發送第二個請求！

另外， response.json()是一個 promise，必須解決！

我已經重構了您的代碼，因此使用 async/await 更容易理解。

const fetchData = async() => {
    const response = await fetch('http://127.0.0.1:8000/api/get-order-item/' + sessionStorage.getItem('id'), {
        method: 'GET',
        headers: {
            'Content-Type': 'application/json',
            'Authorization': 'Bearer' + ' ' + sessionStorage.getItem('token')
        }
    })
    const data = await response.json();
    
    if(data) {
        setMyItems(data)
        /// setGetData(true) <- dont need
        data.forEach(
            (e) => {
                console.log(e) // <- why are you logging every item?
            }
        )

        const infoResponse = await fetch('http://127.0.0.1:8000/api/data')
        const infoData = await infoResponse.json();

        setOrigData(infoData)
        console.log('fetch done')

    }
}

useEffect(() => {
    (async() => {
        await fetchData()
    })()
}, [])