Javascript 在渲染时获取graphql查询结果并重新渲染，但延迟

我有一个React Apollo应用程序，我正在尝试做的是，我有一个组件，可以使用图表呈现一些数据。对于这些数据，我使用钩子将一些过滤器保存在组件的本地状态中

const [filters, setFilters] = useState(defaultFilters);

现在我想要的是，每当组件装载时，使用默认过滤器获取数据。但我还想在用户更新过滤器并单击SUBMIT时重新获取数据，我会使用新的过滤器获取结果

因为我还想获取过滤器更新的结果，所以我使用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函数可以使它在每次重新渲染时运行

---

我想我在这里定义的问题与我的有点相似。

问题的一部分是，你确实有两种不同的状态，你正试图利用一个钩子来实现。在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当时的任何值，并且您的查询将更新以反映新变量。

好的，因此基本上，当我更新inputFilters时，组件将重新呈现，并且useQuery挂钩不会运行，因为其中没有使用inputFilters状态。是吗？好的，谢谢。还有一个问题，到底是什么在控制这部分？比如，如果我在这个函数组件中创建一个函数，并将appliedFilters传递给它，比如so const[inputFilters，setInputFilters]=useStatedefaultFilters const[appliedFilters，setAppliedFilters]=useStateinputFilters const{data}=useQueryGET_data_查询，{变量：{filters:appliedFilters}}const tempFun=appliedFilters=>{console.logTEMP FUN RUN；}此tempFun始终运行，但useQuery钩子不运行。那么useQuery是否管理对appliedFilters更新运行查询？此外，此方法似乎有一个问题，如果用户再次单击submit，只是为了刷新数据，而不更改筛选器，则查询将无法获取新结果！！：\useQuery始终在渲染时被调用，但是internally它不会发出另一个请求，除非选项更改或您已将fetchPolicy设置为（例如）仅网络。如果您希望在每次单击submit时发送请求，则可以将inputFilters与appliedFilters进行比较，如果它们相等，则不调用setAppliedFilters，而是调用refetch。refetch由useQuery挂钩和可以调用以手动触发查询的重新提取。