I have a app.jsx, which will request two different api named API_A & API_B. I will get data_A and data_B from this two api and merge them into a info state for render ui. My code is like this:

  const [info, setInfo] = useState();

  function go(){
    API_A().then(({ data }) => {
      setInfo((prev) => {
        const t = {
          ...prev,
          ...data,
        };
        console.log('===== set API_A ====', t);
        // for deep clone, in real condition res is a object
        return JSON.parse(JSON.stringify(t));
      });
    });
    API_B().then(({ data: res = {} }) => {
      setInfo(prev => {
        
        const t = {
          ...prev,
          ...res,
        };
        console.log('===== set API_B ====', t);
        // for deep clone, in real condition res is a object
        return JSON.parse(JSON.stringify(t));
      });
    });
  }

  useEffect(() => {
    go();
  }, [])

  useEffect(() => {
    console.log('=====useEffect info', info); 
  }, [info]

the console result like this image. It did’t set data_B into info successfully. console result

I dont know why data_B havent been set into info. It looks like setState has been executed but not been set successfuly.

react version: 17.0.48