我有一个React Apollo应用程序，我想做的是我有一个使用图表呈现一些数据的组件。对于此数据，我有一些保存在组件本地状态的过滤器（使用挂钩）
const [filters, setFilters] = useState(defaultFilters);
现在，我想要的是无论何时安装组件，都使用默认过滤器获取数据。但是，我还想在用户更新过滤器并提交时单击以重新获取数据，并使用新的过滤器来获取结果。
由于我也想获取过滤器更新的结果，因此我使用了apollo提供的useLazyQuery挂钩
const [getData, {data}] = useLazyQuery(GET_DATA_QUERY, { variables: {filters} });
useEffect(getData, []); // this useEffect runs only when the component mounts and never again
但是，发生的事情是每当我的状态，过滤器，更新getData函数自动运行时！总是！ （在场景后面）
我要如何处理此类情况，以便在安装和重新渲染时获取结果。
我曾尝试使用它提供的useQuery和refetch，但是在那里，当我更新状态时，都会遇到相同的问题，组件会重新渲染，并且useQuery挂钩会运行并进行调用。 （这就是我认为它运行的方式）
如何修复当前代码。在useEffect函数内调用getData函数可使其在每次重新渲染时运行。
我想我在stackoverflow-question中定义的问题与我的有点类似。
最佳答案
问题的一部分是，您确实有两种不同的状态，您正试图利用单个钩子进行处理。您具有在UI中表示输入值的状态，然后具有表示要实际应用于图表的过滤器的状态。这是两个独立的状态位。
最简单的解决方案是执行以下操作：
const [inputFilters, setInputFilters] = useState(defaultFilters)
const [appliedFilters, setAppliedFilters] = useState(inputFilters)
const { data } = useQuery(GET_DATA_QUERY, { variables: { filters: appliedFilters } })
const handleSubmit = () => setAppliedFilters(inputFilters)
const handleSomeInputChange = event => setInputFilters(...)
这样，您仅使用
inputFilters/setInputFilters来管理输入的状态。当用户单击您的提交按钮时，appliedFilters设置为当时的inputFilters，并且您的查询将更新以反映新变量。关于javascript - 在渲染上获取graphql查询结果并重新渲染，但延迟，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/59754615/