state变更时react-use的useAsync未执行？如何实现API重调？

核心问题 #

你用的react-use库的useAsync，第二个参数是依赖数组，目前传的是空数组[]，这就限定了这个异步请求只会在组件首次挂载时执行一次。哪怕父组件的appTaskList/envTaskList变化导致TaskComponent重新渲染，只要依赖数组里的内容没更新，useAsync就不会重新触发请求。

另外你生成的query变量完全依赖传入的app和env，但这个变量也没被加入useAsync的依赖，所以即使app/env变了，query更新了，useAsync也感知不到，自然不会重新发起请求。

解决办法 #

把所有影响请求结果的变量都放进useAsync的依赖数组里，包括backendUrl、apiPath、query、fetch这些，其中最关键的就是app和env（它们变了会直接导致query变化）。

修改后的TaskComponent代码：

export const TaskComponent = ({ app, env }) => {
  const { fetch } = useApi(fetchApiRef);
  const config = useApi(configApiRef);
  const backendUrl = config.getString('backend.baseUrl');
  const apiPath = config.get('aws.path');
  const query = getQuery(useEntity().entity, env, app);

  // 把所有影响请求的变量加入依赖数组
  const { value, loading, error } = useAsync(async (): Promise<any[]> => {
    const response = await fetch(`${backendUrl}${apiPath}/tasks?${query}`);
    console.log("useAync execution")
    return await response.json();
  }, [backendUrl, apiPath, query, fetch]);

  const columns: TableColumn[] = parseTableData(value);

  if (loading) {
    return <Progress />;
  } else if (error) {
    return <ResponseErrorPanel error={error} />;
  }
  return (
    <div>
      <Table
        options={{ paging: false, padding: 'dense' }}
        data={testData10}
        columns={columns}
        title={`${app} ${env} task definitions`}
      />
    </div>
  );
}

补充说明 #

• useAsync的依赖数组逻辑和React原生的useEffect、useCallback完全一致：数组里的任意变量变化，就会重新执行异步函数。
• 一定要把异步函数内部用到的所有外部变量都加进依赖，不然会出现闭包问题，比如用旧的query发起请求，导致结果不符合预期。

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