Проблемы с синхронным рендерингом

Question

const Temp = () => {
  const [temp, setTemp] = useState("Not Changed");
  const SERVER_URL = "http://localhost:8000";
  const token = Cookies.get("token");
  const config = {
    headers: {
      Authorization: `Jwt ${token}`,
    },
  };
  Axios.get(`${SERVER_URL}/accounts/4`, config)
    .then((res) => {
      setTemp(res.data.data.first_name);
    })
    .catch((err) => {
      console.log(err);
    });
  return <h1>HI I'm {temp}!!</h1>;
};

export default Temp;

Когда я выполняю код, на экране сначала отображается «Привет, я не изменился», а вскоре после изменения на «Привет, я, Джон», где Джон - это имя пользователя с идентификационным номером 4.

В этом случае, что я могу сделать, чтобы код возврата ждал, пока он не получит имя пользователя, и просто покажет «Привет, я Джон» вместо «Привет, я» Не изменено "до получения ответа от задних серверов и изменения значения temp?

Answer 1

Вы можете использовать флаг, чтобы уведомить вас, когда обещание выполнено.

Если нет, вернуть в DOM нулевое значение.

const Temp = () => {
  const [temp, setTemp] = useState("Not Changed");
  const [isLoaded, setIsLoaded] = useState(false);
  const SERVER_URL = "http://localhost:8000";
  const token = Cookies.get("token");
  const config = {
    headers: {
      Authorization: `Jwt ${token}`,
    },
  };
  Axios.get(`${SERVER_URL}/accounts/4`, config)
    .then((res) => {
      setTemp(res.data.data.first_name);
      // set flag to true once the val you want is received
      setIsLoaded(true);
    })
    .catch((err) => {
      console.log(err);
    });
  // display only once temp is set with val from server
  if (isLoaded) { 
    return <h1>HI I'm {temp}!!</h1>;
  }
  // return null to display empty 
  return null;
};