反应钩子查询不更新状态更改答案

【问题标题】：React hook query not updating on state change反应钩子查询不更新状态更改
【发布时间】：2020-05-29 21:32:58
【问题描述】：

我有一个带有两个选择输入的 React 组件； Select A 允许您选择一个大小，然后根据选择的内容将该大小传递到一个 React 钩子 (getPackageBySize) 中，该钩子执行一个 GET 查询，该查询返回 Select B 的该大小的选项列表。所以：

Select A = 100 should return options ['A','B','C']
Select A = 50 should return options ['X','Y','Z']

当组件以“100”的初始大小值加载时，它会加载选择 B 的正确选项（['A','B','C']）。但是，如果我随后从 Select A 中选择一个新尺寸，它不会将 Select B 中的选项更新为 ['X','Y','Z']。这是钩子：

  const [
    options,
    refetchOptions,
  ] = getPackageBySize(
    props.size
  );

还有一个 useEffect 钩子，它会在大小发生变化时再次调用第一个钩子：

  useEffect(() => {
    refetchOptions(
      props.size
    );
  }, [props.size]);

而“getPackageBySize”是：

export default (size: string) => {
  const dispatch = useDispatch();
  const [fetch, reFetch] = useAxios({
    options: {
      method: 'get',
      headers: {
        Authorization: getAuthToken(),
        'Content-Type': 'application/json',
      url:
        `${routes.search.api.ROOT}` +
        '?q=TYPE:"package" AND =size:"' +
        size +
        '"',
    },
    forceDispatch: () => true,

    handler: (error: any, response: any) => {
      if (error) {
        dispatch(
          addToast({
            labels: {
              heading: 'Error',
              details: `${error.message}`,
            },
            variant: 'error',
          })
        );
      }
      if (response) {
        return console.log('Response: ', response);
      }
    },
  });
  return [fetch, reFetch];
};

所以在初始加载时它会查找默认大小 100 并返回 ['A', 'B', 'C']。当我将 Select A 更改为 50 时，我可以看到 getPackageBySize 获得了正确的大小 arg '50'。它将其插入 URL 并处理查询但是当我收到响应时，我可以看到响应中的 URL 仍在使用原始大小：

url: "http://localhost:4001/http://site.local:8080/search/content?q=TYPE:"package" AND =size:"100""

如果我离开页面然后返回，它会以正确的值 50 运行查询，然后返回 ['X', 'Y', 'Z']。

有谁知道如何确保 URL 更新而不必离开页面并返回？

【问题讨论】：

组件挂载后什么时候触发效果重新运行getPackageBySize来再次获取任何东西？
@DrewReese 我有一个 useEffect 钩子，它调用第一个尺寸变化的钩子，对不起，我将它添加到原始问题中。
看起来 refetchOptions 是 stale closure 是否没有警告它在效果依赖项中丢失？
@HMR 我没有注意到任何警告，但这听起来像是我的问题，谢谢你的提示，我会看看那个链接。

标签： reactjs react-hooks

【解决方案1】：

如果我理解得很好，您并没有使用状态来存储您的 axios 调用返回的结果。如果我是对的，那很正常。您需要更新状态或道具以触发组件的重新渲染（因此更新您的选择值）。

【讨论】：