React中useMultiChatLogic在useEffect执行完成前运行的问题

我编写了如下ChatsPage组件代码：

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回调中，但触发了钩子错误，其他尝试也未能解决问题。

核心问题有两个：一是React钩子必须在组件每次渲染的顶层顺序执行，不能放在异步回调里；二是你用普通变量存储认证数据，更新后不会触发组件重新渲染，导致useMultiChatLogic始终拿不到正确值。以下是具体解决步骤：

1. 用状态管理认证数据 #

把普通变量换成useState，确保数据更新时触发组件重新渲染：

const [authData, setAuthData] = useState({ username: "", secret: "" });

2. 在useEffect中更新状态 #

修改useEffect的回调逻辑，通过setAuthData更新状态：

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

3. 条件初始化钩子并处理加载状态 #

因为初始状态下authData是空的，直接传给useMultiChatLogic可能导致异常，推荐两种处理方式：

方案一：等待认证完成后再初始化钩子

const ChatsPage = () => {
    const [authData, setAuthData] = useState({ username: "", secret: "" });
    const [isAuthenticated, setIsAuthenticated] = useState(false);

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

    let chatProps = null;
    // 仅在认证完成后初始化钩子
    if (isAuthenticated) {
        chatProps = useMultiChatLogic('xxxxx-xxx-xxx-xxx-xxx', authData.username, authData.secret);
    }

    // 未认证时显示加载状态
    if (!isAuthenticated) {
        return <div>加载中...</div>;
    }

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

方案二：直接传状态值，加加载判断

如果useMultiChatLogic支持接收空参数并处理未就绪状态，可以简化为：

const ChatsPage = () => {
    const [authData, setAuthData] = useState({ username: "", secret: "" });

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

    // 组件会在authData更新后重新渲染，钩子自动获取最新参数
    const chatProps = useMultiChatLogic('xxxxx-xxx-xxx-xxx-xxx', authData.username, authData.secret);

    // 未拿到有效数据时显示加载
    if (!authData.username || !authData.secret) {
        return <div>加载中...</div>;
    }

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

关键提醒 #

• 永远不要在异步回调、条件判断或循环中调用React钩子，必须遵守钩子的顶层执行规则
• 异步获取的数据一定要用useState或useReducer管理，否则数据更新不会触发组件重渲染

内容的提问来源于stack exchange，提问作者devdude19289