Question

我对自定义钩子的第一次尝试现在像疯了似的循环着，我不完全理解为什么我需要测试看看它是否保存了响应或错误内容，然后如果没有保存则进行呼叫？

auditVM.AuditResults = mapper.Map<List<Answer>, 
    List<AnswerVM>>audit.AuditResults.ToList());

我打电话给

import React, { useContext } from 'react';
import { Context } from "../components/context";


const useFetch = (url: string, bearer: string, method: string, body: any) => {

    const { global } = useContext(Context) as {global: any};
    let headers = {'cache-control': 'no-cache', 'Content-Type': 'application/json' };
    if (bearer) headers = {...headers, ...{'Authorization': bearer}}

    const [response, setResponse] = React.useState(null);
    const [error, setError] = React.useState(null);
    const apiUrl = global.apiUrl;

    React.useEffect(() => {
      const fetchData = async () => {
        try {
            let res; 
            if (method === 'GET') res = await fetch(apiUrl + url, {method, headers});
            else res = await fetch(apiUrl + url, {method, headers, body});
            setResponse(await res.json());
        } catch (error) {
          setError(error);
        }
      };
      fetchData();
    }, [apiUrl, body, headers, method, url]);

    return { response, error };
  };

  export { useFetch }

Answer 1

每次您无条件更改useEffects中的状态时，它都会无休止地循环，因为它在每次状态更改后都在调用，您一次又一次更改状态，而useEffects又在调用中，依此类推...

可能应该有一些标志，并且仅当标志不为真时才获取数据

const [isLoaded, setIsLoaded] = React.useState(false);
const [response, setResponse] = React.useState(null);
const [error, setError] = React.useState(null);

const apiUrl = global.apiUrl;


React.useEffect(() => {

  const fetchData = async () => {
    if (isLoaded) return
    try {
      let res;
      if (method === 'GET') res = await fetch(apiUrl + url, {method, headers});
      else res = await fetch(apiUrl + url, {method, headers, body});
      setResponse(await res.json());
      setIsLoaded(true)
    } catch (error) {
      setError(error);
    }
  };

Answer 2

useEffect的依赖项之一发生更改时都会被调用。您输入了[apiUrl, body, headers, method, url]。 headers和apiUrl都是局部变量，每次调用该钩子时都会重新创建。这意味着每次执行useFetch时，对这些变量的引用都会更改。

useEffect设置成功或错误状态，从而导致重新渲染，从而导致重新生成那些变量，从而导致useEffect再次被调用。

我建议将这两个变量都从依赖项数组中删除，并将变量移至useEffect调用中，因为它们无论如何都只能在其中使用。

React TypeScript：自定义钩子循环无限

2 个答案: