组件重载时useAsync钩子未触发的问题及解决方法咨询

问题出在useAsync的依赖项设置上——你当前传的是空数组[]，这意味着这个钩子只会在组件首次挂载时执行一次，后续props变化时不会触发重新运行。要让props变化时重新调用useAsync，需要做以下两步：

• 将影响请求URL的props添加到useAsync的依赖数组中
• 在异步函数里使用传入的props动态生成请求URL

修改后的ChildComp代码如下：

export const ChildComp = (props: any) => {
    console.log("#1");
    // 把用到的props（比如props.data）加入依赖数组
    const { value, loading, error } = useAsync(async (): Promise<any> => {  
        console.log("#2");
        // 根据props动态生成URL
        const response = await fetch(`https://your-api-url.com?data=${props.data}`);
        const data = await response.json();
        return data;
    }, [props.data]); // 这里传入依赖项，props.data变化时会重新执行

    if (loading) {
        return <div>加载中...</div>;
    } else if (error) {
        return <div>请求出错：{error.message}</div>;
    }

    return <div>{JSON.stringify(value)}</div>;
};

关键说明： #

• 依赖数组[props.data]：当数组里的任何值发生变化时，useAsync就会重新执行异步函数。如果你的URL依赖多个props，就把所有相关的props都放进这个数组里。
• 动态URL：确保请求URL是基于最新的props生成的，这样每次props变化时，请求的目标地址也会对应更新。

如果你的useAsync是自定义钩子，需要确认它确实会监听依赖数组的变化——标准的异步钩子（符合React钩子规则的实现）都会遵循这个依赖项逻辑。

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