Question

我有一个使用useEffect的react自定义钩子。该挂钩应该使用JS fetch从 api 获取数据。现在，我想根据情况返回api或错误数据，然后在调用此钩子的组件上分解值。下面是我的自定义钩子的代码

export const useGetData = (url, body) => {
const [state, setState] = useState([]);
const [errorMsg, setErrorMsg] = useState({});
useEffect(() => {
    fetch(url, {
      method: 'Post',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(body)
    }).then(response => response.json())
    setState({response});
  ).catch(error =>
    console.error('Error:', error);
    setErrorMsg(error);
    return errorMsg;
  );
}
}, [url, body]);
return state;
}

这是从react组件调用它的方式

  let data = { state: '', errorMsg: '' };
  data = useGetData('url', 'body');

现在，当api调用成功时，我能够在data中获取正确的数据，但是在失败的情况下无法获取错误数据。我的自定义钩子会在出现错误的情况下尽早返回，但无法在被调用的React组件中破坏该钩子。怎么了

Answer 1

我相信您没有看到错误数据的原因是您没有从errorMsg钩返回useGetData。

尝试一下：

    export const useGetData = (url, body) => {
    const [data, setData] = useState([]);
    const [errorMsg, setErrorMsg] = useState({});
    useEffect(() => {
        fetch(url, {
          method: 'Post',
          headers: {
            'Content-Type': 'application/json'
          },
          body: JSON.stringify(body)
        }).then(response => {
         let data = response.json())
         setData(data);
        }  
      ).catch(error => {
        console.error('Error:', error);
        setErrorMsg(error);
      });
    }
    }, [url, body]);
    return {data, errorMsg};
    }

，然后在您的组件中访问数据，如下所示：

  const {data, errorMsg} = useGetData('url', 'body');

希望这会有所帮助

从react useEffect的早期返回不会影响自定义钩子

1 个答案: