同步渲染有问题

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;当我执行代码时，屏幕最初显示“你好，我没有变”，不久之后显示“你好，我是约翰”，约翰是 ID 号为 4 的用户的名字。在这种情况下，我该怎么做才能让返回代码等到它获得用户的名字并只显示“嗨，我是约翰”，而不是在获得响应之前呈现“嗨，我没有改变”后台服务器和更改临时值？

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;

};