reactjs - 使用 useQuery 过滤数据 onChange 无法正常工作

Question

我正在创建一个选择并想用它过滤我的数据。因此，一旦我更新了状态，我就会使用 react-query 提供的“重新获取”功能

看起来我的数据没有正确更新。它的行为如下：

• 我点击“喜剧”没有数据发送到服务器
• 然后我点击“戏剧”"?genres=comedy"并发送到服务器
• 用“喜剧”性别对渲染电影做出反应

  const [shows, setShows] = useState([]);
  const [genres, setGenres] = useState([]);

  const [filterGenre, setFilterGenre] = useState("");
  const [filterText, setFilterText] = useState("");

  const fetchShow = () => {
    let data = api.search(filterGenre, filterText);
    return data;
  };

  const query = useQuery("show-page", fetchShow, {
    onSuccess: (data) => setShows(data.data.shows),
  });

  const queryGenre = useQuery("genres", api.genres, {
    onSuccess: (data) => setGenres(Object.keys(data.data.genres)),
  });

  const handleSelect = async (e) => {
    setFilterGenre(e.target.value);
    query.refetch();
  };

  const handleInput = async (e) => {
    setFilterText(e.target.value);
    query.refetch();
  };

返回

<>
      <>
        {query.isLoading && <Spinner />}

        {query.isSuccess && (
          <>
            <select name="genre" onChange={handleSelect}>
              <option value="">All</option>
              {genres.map((genre) => {
                return <option value={genre}>{genre}</option>;
              })}
            </select>

            <input type="text" onChange={handleInput} />

            <div className="container-show-page">
              {shows.map((show) => {
                return (
                  <div className="card-show-page">
                    <img src={show.poster} alt="" className="image-show-page" />
                  </div>
                );
              })}
            </div>
          </>
        )}
      </>
    </>

标签： reactjsreact-query

Answer 1

我刚刚找到了解决方案。我不确定这是否是最好的方法，但现在它可以按我的意愿工作。我做了：

const { query, isSuccess, isError, refetch, isLoading } = useQuery("show-page", fetchShow, {
    onSuccess: (data) => setShows(data.data.shows),
  });

并删除“重新获取”到handleOnChange和handleInput +添加useEffect与依赖

  const handleSelect = async (e) => {
    setFilterGenre(e.target.value);
  };

  const handleInput = async (e) => {
    setFilterText(e.target.value);
  };

  useEffect(() => {
    refetch();
  }, [filterText, filterGenre, refetch]);