reactjs - 状态变化时如何防止 useQuery 运行？

Question

我正在使用 React Apollo 从我的服务器获取数据。当我的页面加载时，我使用 useQuery 来检索数据。这工作正常。问题是当我对搜索表单进行更改时，这会更新导致不需要的重新渲染的状态，从而再次调用服务器。

我只想在页面加载和单击搜索按钮时调用服务器。

使用查询:

const { loading: loadingLessons, error: lessonsError, data: lessons } = useQuery(
 LESSON_BY_PARAMS,
    {
      variables: { findLessonsInput: searchParams },
    },
);

当我更改表单字段时，它调用 updateFormField 更新 redux 状态导致重新渲染

<Autocomplete
  options={categories}
  getOptionLabel={(option: any) => option.label}
  inputValue={form.category}
  defaultValue={() => {
    const value = categories.find(option => option.label === form.category);
    return value;
  }}
  onChange={(event, value) => updateFormField('category', value?.label)}
  renderInput={params => (
    <TextField {...params} label="Category" variant="outlined" fullWidth />
  )}
/>

我正在使用 react 钩子(Hook)。

Answer 1

看看skip可用于完全跳过查询的选项。你可以这样做:

const [skip, setSkip] = React.useState(false)
const { loading, data } = useQuery(QUERY, { skip })

React.useEffect(() => {
  // check whether data exists
  if (!loading && !!data) {
    setSkip(true)
  }
}, [data, loading])

因此，一旦数据返回，您只需将跳过选项设置为 true。如果您想发出请求，您应该处理搜索按钮上的 onClick(只需 setSkip(false))。