React js function 未被调用

Question

In react js, I am fetching data from multiple API and I need to fetch them one by one and also call some functions one by one so I used react state with if statements to make them work. I am changing the state of different useState variables once one fetch or a particular function is done but even when the state is changed the functions are not running. The whole code is inside another function but I have not provided it. In the fetchData function, I want to run the functions and fetches synchronously but they are not running

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 is not meant to run synchronously. The view rendering has priority and shouldn't be blocked by some code which is not view-relevant in the first place. The concept for running view-blocking code is useEffect . You get the idea of using APIs on theexplanation of useEffect

Answer 2

The reason this doesn't work is it relies on state data being set in the function block. There is no reason why you need this state to send the second request when you have the data from the first response to hand!

Also, response.json() is a promise and must be resolved!

I've refactored your code so it is easier to follow using 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()
    })()
}, [])