Question

我已经构建了这个自定义反应钩子：

import { useEffect, useContext, useState } from 'react';
import { ProductContext } from '../contexts';
import axios from 'axios';

export default function useProducts(searchQuery) {
  const [products, setProducts] = useContext(ProductContext);
  const [isLoading, setIsloading] = useState(true);

  useEffect(() => {
    axios
      .get(`/shoes?q=${searchQuery ? searchQuery : ''}`)
      .then((res) => {
        setProducts(res.data);
        setIsloading(false);
      })
      .catch((err) => {
        console.error(err);
      });
  }, [searchQuery, setProducts]);

  return { products, isLoading };
}

它基本上根据我传入的查询字符串获取一些数据。查询字符串来自输入字段：

import React, { useState } from 'react';
import { FiSearch } from 'react-icons/fi';
import { useProducts } from '../../hooks';

export default function SearchBar() {
  const [query, setQuery] = useState('');

  const handleChange = (e) => {
    e.preventDefault();
    setQuery(e.target.value);
  };

  useProducts(query);

  return (
    <div className="search-form">
      <FiSearch className="search-form__icon" />
      <input
        type="text"
        className="search-form__input"
        placeholder="Search for brands or shoes..."
        onChange={handleChange}
      />
    </div>
  );
}

问题是它会在用户输入时获取。我希望它在用户没有输入 500 毫秒后获取。

我尝试的是：

  setTimeout(() => {
    useProducts(query);
  }, 500);

但这会返回一个错误：

<块引用>

src\components\header\SearchBar.js 第 14:5 行：不能在回调中调用 React Hook “useProducts”。 React Hooks 必须在 React 函数组件或自定义 React Hook 函数中调用 react-hooks/rules-of-hooks

搜索关键字以详细了解每个错误。

Answer 1

您可以使用额外的状态来消除您的价值。 query 更改后，我们会启动一个 500 毫秒的计时器，该计时器将设置 debounced 的值。但是，如果效果重新运行，我们会清除该计时器并设置一个新计时器。

import React, { useState, useEffect } from 'react';
import { FiSearch } from 'react-icons/fi';
import { useProducts } from '../../hooks';

export default function SearchBar() {
  const [query, setQuery] = useState('');
  const [debounced, setDebounced] = useState('');

  useEffect(() => {
    const timeout = setTimeout(() => {
      setDebounced(query);
    }, 500);
    return () => { clearTimeout(timeout) }
  }, [query])

  const handleChange = (e) => {
    e.preventDefault();
    setQuery(e.target.value);
  };

  useProducts(debounced);

  return (
    <div className="search-form">
      <FiSearch className="search-form__icon" />
      <input
        type="text"
        className="search-form__input"
        placeholder="Search for brands or shoes..."
        onChange={handleChange}
      />
    </div>
  );
}

Answer 2

我会更改 useProducts 钩子以接受去抖动时间作为参数，并让它仅在去抖动时间结束后才进行 axios 调用：

useProducts(query, 500);

export default function useProducts(searchQuery, debounceTime = 0) {
    const [products, setProducts] = useContext(ProductContext);
    const [isLoading, setIsloading] = useState(true);
    const [timeoutId, setTimeoutId] = useState();
    useEffect(() => {
        clearTimeout(timeoutId);
        setTimeoutId(setTimeout(() => {
            axios
                .get(`/shoes?q=${searchQuery ? searchQuery : ''}`)
                .then((res) => {
                    setProducts(res.data);
                    setIsloading(false);
                })
                .catch((err) => {
                    console.error(err);
                });
        }, debounceTime));
    }, [searchQuery, setProducts]);
    return { products, isLoading };
}

在运行反应钩子之前等待 500 毫秒

2 个答案: