反应钩子查询在状态更改时不更新

Question

我有一个带有两个选择输入的 React 组件;选择 A 允许您选择一个大小，然后根据所选内容将该大小传递到 React 钩子 (getPackageBySize) 中，该钩子执行 GET 查询，该查询返回选择 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 获得正确的大小参数"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 调用返回的结果。如果我是对的，那就很正常了。您需要更新状态或 prop 以触发组件的重新渲染(因此更新您的选择值)。