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
Redux-Toolkit 和 React Hooks - 存储更改不会触发重新渲染