如果某个条件不满足，阻止redux获取钩子联系服务器

rqcrx0a6 于 2023-08-05 发布在其他

关注(0)|答案(2)|浏览(76)

我使用Redux的createApi创建了useFetchLocationsQuery钩子。钩子调用服务器，返回与查询字符串匹配的城市名称。如果查询为空（例如，如果应用程序加载或如果用户清除搜索字段），我需要防止挂钩联系服务器，但不知道如何做到这一点。请指示。

import { Autocomplete, Button, Grid, TextField } from '@mui/material';
import { useFetchLocationsQuery } from '../store';
import { useMemo, useState } from 'react';
import debounce from 'lodash.debounce';

export function AddLocationComponent() {
  const [query, setQuery] = useState('');
  const {data } = useFetchLocationsQuery(query);
  const options = (data || []).map(p => p.name);

  const changeHandler = event => {
    setQuery(event.target.value);
  };

  const debouncedEventHandler = useMemo(() => debounce(changeHandler, 2000), []);

  const renderInput = params => {
    return <TextField {...params} onChange={debouncedEventHandler} label="With categories"/>
  }

  return (
      <div>
        <Grid container>
          <Grid item xs={10}>
            <Autocomplete
                options={options}
                renderInput={renderInput}
                onInputChange={debouncedEventHandler}
            />
          </Grid>
        </Grid>
      </div>
  );
}

字符串

redux

来源：https://stackoverflow.com/questions/76690592/prevent-redux-fetch-hook-from-contacting-the-server-if-a-condition-is-not-met

2条答案

按热度按时间

gz5pxeao1#

您可以使用skip选项或skipToken：

const {data } = useFetchLocationsQuery(query, { skip: someCondition });

个字符

赞(0）回复(0）举报 2023-08-05

lo8azlld2#

看起来useFetchLocationQuery应该在yoru组件的顶层无条件调用。你可以使用useEffect钩子：

import { Autocomplete, Button, Grid, TextField } from '@mui/material';
import { useFetchLocationsQuery } from '../store';
import { useState, useEffect, useMemo } from 'react';
import debounce from 'lodash.debounce';

export function AddLocationComponent() {
  const [query, setQuery] = useState('');
  const [options, setOptions] = useState([]);
  
  const { data } = useFetchLocationsQuery(query);

  const changeHandler = event => {
    setQuery(event.target.value);
  };

  const debouncedEventHandler = useMemo(() => debounce(changeHandler, 2000), []);

  useEffect(() => {
    if (query) {
      // Fetch data only when query is non-empty
      // Update options based on the fetched data
      setOptions((data || []).map(p => p.name));
    } else {
      // Reset options when query is empty
      setOptions([]);
    }
  }, [query, data]);

  const renderInput = params => {
    return <TextField {...params} onChange={debouncedEventHandler} label="With categories" />;
  };

  return (
    <div>
      <Grid container>
        <Grid item xs={10}>
          <Autocomplete
            options={options}
            renderInput={renderInput}
            onInputChange={debouncedEventHandler}
          />
        </Grid>
      </Grid>
    </div>
  );
}

字符串

赞(0）回复(0）举报 2023-08-05

我来回答

如果某个条件不满足，阻止redux获取钩子联系服务器

2条答案

相关问题

热门标签

最新问答