时间戳

首页 > 解决方案 > 当依赖项需要用户输入时，避免“useEffect”在挂载时获取数据

reactjs - 当依赖项需要用户输入时，避免“useEffect”在挂载时获取数据

问题描述

React 钩子useEffect在组件挂载时运行。但是，如果效果依赖于用户输入，则效果的挂载执行是多余的。那么对依赖项运行验证然后相应地执行钩子是否可以接受？

代码沙盒示例 

useEffect(() => {
    const fetchDogImage = async () => {
        const dogImage = await axios
            .get(`https://dog.ceo/api/breed/${breed}/images/random`)
            .then(response => response.data.message);

        setDogImage(dogImage);
    };

    // This avoids fetching dog image on mount - user hasn't searched for a dog breed, yet.
    // Is this an acceptable pattern?
    if (breed !== '') {
        fetchDogImage();
    }
}, [breed]);

标签： reactjsreact-hooks

解决方案

是的，我认为可以检查以防止第一次运行。此外，您也可以使用 Debouce来防止您的搜索过于频繁。例如

function useDebounce(value, delay) {
  const [debouncedValue, setDebouncedValue] = useState(value);

  useEffect(
    () => {
      const handler = setTimeout(() => {
        setDebouncedValue(value);
      }, delay);

      return () => {
        clearTimeout(handler);
      };
    },
    [value, delay],
  );

  return debouncedValue;
}

function App() {
    const [dogImage, setDogImage] = useState('');
    const [breed, setBreed] = useState('');
    const debouncedValue = useDebounce(breed, 1000);

    useEffect(() => {
        const fetchDogImage = async () => {
            const dogImage = await axios
                .get(`https://dog.ceo/api/breed/${debouncedValue}/images/random`)
                .then(response => response.data.message);

            setDogImage(dogImage);
        };

        if (debouncedValue !== '') {
            fetchDogImage();
        }
    }, [debouncedValue]);

    return (
        ...
    );
}

推荐阅读