反应性钩子(功能)生命周期:在useEffect()代码之前呈现的组件

Question

我用的是反应功能成分。我熟悉类生命周期，但不熟悉功能生命周期。我的问题是，这个组件是在useEffect().中执行的初始化完成之前呈现的。在我的return()中，我检查状态变量是否为真。

我首先看到了我的非错误布局( Main)

• In & 2-3秒).屏幕更改为Error布局

处理功能组件的顺序是什么？在对错误条件进行评估之前，我无法显示非错误布局。

function App() {

    const [error, setError] = useState({});
    const [userInfo, setUserInfo] = useState({});

    const fetchUserInfo = async () => {
       const url = 'http://myapp.com/fetchUserInfo';
       try {
          const response = await axios.get(url);
          setUserInfo(response.data);
       }
       catch (error) { 
          setError(error);
       }
    }  

    // On initialization, fetch UserInfo
    useEffect(() => {    
        fetchUserInfo();
    }, []);

    return (
        <div className="App">
            <Router>
                <Header />
                
                {error.message
                    ? 
                        <Error error={error} /> 
                    :
                        <div>
                            <TopNav userInfo={userInfo} />
                            <Main userInfo={userInfo} />
                        </div>
                }
                
                <Footer />
            </Router>
        </div>
  );
}

Answer 1

useEffect回调函数是在呈现周期之后调用的，因此，一旦呈现完成，就会进行fetchUserInfo调用，这也是一个异步操作。

相反，您应该拥有一个加载状态，让UI等待，API将提供作为响应来显示适当的UI。

function App() {
    const [isLoading, setIsLoading] = useState(true);
    const [error, setError] = useState({});
    const [userInfo, setUserInfo] = useState({});

    const fetchUserInfo = async () => {
       const url = 'http://myapp.com/fetchUserInfo';
       setIsLoading(true);
       try {
          const response = await axios.get(url);
          setUserInfo(response.data);
       }
       catch (error) { 
          setError(error);
       }
       finally {
           setIsLoading(false);
       }
    }  

    // On initialization, fetch UserInfo
    useEffect(() => {    
        fetchUserInfo();
    }, []);

    return (
        <div className="App">
            <Router>
                <Header />
                
                {isLoading? <Loader />: error.message
                    ? 
                        <Error error={error} /> 
                    :
                        <div>
                            <TopNav userInfo={userInfo} />
                            <Main userInfo={userInfo} />
                        </div>
                }
                
                <Footer />
            </Router>
        </div>
  );
}

Answer 2

查看您的代码，只有在异步函数fetchUserInfo被解析/拒绝后，才会得到错误/数据状态。您可以尝试添加第三个状态loading，以表示组件已经挂载，但数据获取正在进行中。

function App() {

  const [error, setError] = useState({});
  const [userInfo, setUserInfo] = useState({});
  const [loading, setLoading] = useState(true)

  const fetchUserInfo = async () => {
    setLoading(true);
    setError({})
    const url = 'http://myapp.com/fetchUserInfo';
    try {
      const response = await axios.get(url);
      setLoading(false);
      setUserInfo(response.data);
    }
    catch (error) {
      setLoading(false)
      setError(error);
    }
  }

  // On initialization, fetch UserInfo
  useEffect(() => {
    fetchUserInfo();
  }, []);

  return (
    <div className="App">
      <Router>
        <Header />

        {error.message && !loading
          ?
          <Error error={error} />
          :
          <div>
            <TopNav userInfo={userInfo} />
            <Main userInfo={userInfo} />
          </div>
        }

        <Footer />
      </Router>
    </div>
  );
}

Answer 3

您的代码将按此顺序执行。

由于第一次呈现的rendered.

• Execute是空的

1. ，所以TopNav和Main将是useEffect钩子，调用fetchUserInfo函数。该错误或userInfo将被更新。由于状态已更改，
2. 将再次呈现该页。在您的示例中，它将计算error.message并呈现相应的组件.