Question

我有一个带有两个选择输入的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更新而不必离开页面返回吗？

Answer 1

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

反应挂钩查询未根据状态更改进行更新

1 个答案: