在 useEffect 完成之前執行的函數
P粉916760429
P粉916760429 2024-04-01 23:34:29
0
1
516

我有這個程式碼:

const ChatsPage = () => {
    let username = ""
    let secret = ""
    useEffect(() => {
        axios
            .post('http://localhost:3001/authenticate')
            .then((response) => {
                username = response.data.username
                secret = response.data.secret
            })
            .catch((error) => {
                console.log(error);
            });
    }, []);

    let chatProps = useMultiChatLogic('xxxxx-xxx-xxx-xxx-xxx', username, secret);

    return (
        <div style={{ height: '100vh' }}>
            <MultiChatSocket {...chatProps} />
            <MultiChatWindow {...chatProps} style={{ height: '100vh' }} />
        </div>
    );
}

問題在於 let chatProps = useMultiChatLogic('xxxx-xx-x-xx-xxx', username, Secret);useEffect 完成之前執行。我嘗試將其移至 .then 內部,但它給出了鉤子錯誤和其他一些東西,但沒有任何效果。

P粉916760429
P粉916760429

全部回覆(1)
P粉983021177

我認為您缺少對 React 的基本了解。查看有關狀態、useEffect 和一般控制流程的教學。

useEffect 是異步的-首次渲染後以及每當設定依賴項陣列中捕獲的變數時,React 都會執行回呼。您的依賴項陣列為空,因此此 useEffect 在元件的生命週期中(在第一次渲染之後)執行一次。

我不知道 Multi 是什麼,但你可以嘗試這樣的東西:

const ChatsPageLoader = () => {
  const [username, setUsername] = useState('');
  const [secret, setSecret] = useState('');

  useEffect(() => {
    axios
      .post('http://localhost:3001/authenticate')
      .then((response) => {
        setUsername(response.data.username);
        setSecret(response.data.secret);
      })
      .catch((error) => {
        console.log(error);
      });
  }, []);

  if (!username || !secret) {
    return 
Loading...
; } return ; }; const ChatsPage = ({username, secret}) => { const chatProps = useMultiChatLogic('xxxxx-xxx-xxx-xxx-xxx', username, secret); return (
); };

在這裡,在第一次渲染時,我們知道請求尚未完成,因為 usernamesecret 仍然是預設的空字串,因此我們渲染一條載入訊息。渲染後,useEffect 運行並啟動請求。

過了一會兒,回應到達,我們為 usernamesecret 設定狀態,這會觸發另一個渲染。在此渲染上,回應中的 usernamesecret 值可用(我假設它們保證在回應中為非空字串),因此不會渲染載入訊息。相反,我們渲染 ChatsPage 元件,該元件接受帶有回應資料的 props。

額外的元件是必要的,因為像useMultiChatLogic 這樣的鉤子必須在任何條件之上聲明.如果這不是一個鉤子,那麼呼叫可以發生在 if 之後的元件函數體中,不需要額外的元件。


React 的黃金法則是狀態是不可變的,因此如果任何資料從一個渲染到下一個渲染發生更改,則必須透過setState 來完成,而不是=

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板