Funktion, die ausgeführt werden soll, bevor useEffect abgeschlossen ist

Question

Ich habe diesen Code:

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>
    );
}

Das Problem ist, dass let chatProps = useMultiChatLogic('xxxx-xx-x-xx-xxx', username, Secret); 在 useEffect läuft, bevor es fertig ist. Ich habe versucht, es in eine .then-Datei zu verschieben, aber es gab Hook-Fehler und einige andere Dinge, aber nichts hat funktioniert.

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 来完成，而不是 = 。