UseEffectc 在从父组件接收 props 值之前运行

Question

下面的 useEffect 在从父组件接收到 props 值之前执行。我注意到，此错误仅在加载新应用程序后发生一次，并且在收到此错误后重新加载同一应用程序时，它可以工作并从道具接收值。 我非常感谢任何建议，以便在收到 props 值后允许运行以下 useEffect。

function Home(props) {
  useEffect(() => {
    axios
      .post("https://........", {
        auth: {
          username: props.username,
          password: props.password,
        },
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  }, [props.username,props.password]);
}

Answer 1

您可以简单地返回以忽略 useEffect 的具体执行，以防

props

尚未定义：

function Home(props) {
  useEffect(() => {

    if(!props) { return };

    axios
      .post("https://........", {
        auth: {
          username: props.username,
          password: props.password,
        },
      })
      .then(function (response) {
        console.log(response);
      })
      .catch(function (error) {
        console.log(error);
      });
  }, [props.username,props.password]);
}