Javascript 同步渲染有问题吗 const Temp=（）=>{ const[temp，settmp]=useState（“未更改”）； const SERVER_URL=”http://localhost:8000"; const token=Cookies.get（“token”）； 常量配置={ 标题：{ 授权：`Jwt${token}`， }, }; get（`${SERVER\u URL}/accounts/4`，config） 。然后（（res）=>{ settep（res.data.data.first_name）； }) .catch（（错误）=>{ 控制台日志（err）； }); 返回嗨，我是{temp}！！； }; 导出默认温度；

当我执行代码时，屏幕最初显示“Hi I'm Not Changed”（嗨，我没有更改），在更改为“Hi I'm John”（嗨，我是John）后不久，John是id号为4的用户的名字

---

在这种情况下，我该怎么做才能让返回代码等到它得到用户的名字并显示“Hi I'm John”，而不是在从后台服务器获得响应并更改temp的值之前显示“Hi I'm Not Changed”？

一旦承诺兑现，您可以使用一个标志通知您

如果不是，则向DOM返回空值

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;

const Temp=（）=>{
const[temp，settmp]=useState（“未更改”）；
const[isLoaded，setIsLoaded]=useState（false）；
const SERVER_URL=”http://localhost:8000";
const token=Cookies.get（“token”）；
常量配置={
标题：{
授权：`Jwt${token}`，
},
};
get（`${SERVER\u URL}/accounts/4`，config）
。然后（（res）=>{
settep（res.data.data.first_name）；
//收到所需val后，将标志设置为true
setIsLoaded（真）；
})
.catch（（错误）=>{
控制台日志（err）；
});
//仅显示一次从服务器用val设置的temp
如果（已加载）{
返回嗨，我是{temp}！！；
}
//返回null以显示为空
返回null；
};

在抓取完成时可以设置一些标志，并根据该标志呈现“Hi（…）”部件：

[isFetchFinished，setIsFetchFinished]=useState（false）

乐意帮助：）

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;
};