javascript - 在渲染时获取 graphql 查询结果并重新渲染，但是很懒

Question

我有一个 React Apollo 应用程序，我想做的是有一个使用图表呈现一些数据的组件。对于这些数据，我有一些过滤器保存在组件的本地状态中(使用 Hook )

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

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

由于我还想获取过滤器更新的结果，因此我使用 apollo 提供的 useLazyQuery Hook

const [getData, {data}] = useLazyQuery(GET_DATA_QUERY, { variables: {filters} });

useEffect(getData, []); // this useEffect runs only when the component mounts and never again

但是，每当我的状态(过滤器)更新时，getData 函数就会自动运行!总是! (幕后花絮)

1. 如何处理这种情况，我想获取安装和重新渲染的结果。我尝试使用它提供的 useQuery 和 refetch，但我遇到了同样的问题，每当我更新状态时，组件都会重新渲染，并且 useQuery Hook 会运行并进行调用。 (我相信这就是它的运行方式)

2. 如何修复我当前的代码。在 useEffect 函数内调用 getData 函数使其在每次重新渲染时运行。

我想我的问题定义在这个stackoverflow-question中和我的有点相似。

Answer 1

问题的一部分是，您确实有两种不同的状态，您正尝试使用单个钩子(Hook)来实现。您拥有代表 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，并且您的查询将更新以反射(reflect)新变量。