在 useEffect 完成之前執行的函數

Question

我有這個程式碼：

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 內部，但它給出了鉤子錯誤和其他一些東西，但沒有任何效果。

Answer 1

我認為您缺少對 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 (
    

      
      
    
  );
};

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

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

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

---

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