React hook查询不会在状态更改时更新

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了React hook查询不会在状态更改时更新相关的知识,希望对你有一定的参考价值。

我有一个带有两个选择输入的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'])。但是,如果我随后从“选择A”中选择一个新的尺寸,它不会将“选择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']。当我将选择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更新而不必离开页面并返回吗?

我有一个带有两个选择输入的React组件; Select A使您可以选择一个大小,然后根据选择的大小将该大小传递到一个执行GET查询的React挂钩(getPackageBySize)...

答案

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

以上是关于React hook查询不会在状态更改时更新的主要内容,如果未能解决你的问题,请参考以下文章

React hooks - useState() 中的状态在路由更改时不会重置

useSelector 函数没有更新调度函数后的状态 -react hooks

我的状态没有使用 React Hooks 更新

Redux-Toolkit 和 React Hooks - 存储更改不会触发重新渲染

React Hooks:使用useState更新状态不会立即更新状态[重复]

使用React useContext hook进行分派调用后,反应状态不会更新