从 react useEffect 自定义钩子的早期返回没有得到解构答案

【问题标题】：Early return from react useEffect custom hook is not getting destructure从 react useEffect 自定义钩子的早期返回没有得到解构
【发布时间】：2020-05-08 07:59:40
【问题描述】：

我有一个使用 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;
}

这是从反应组件中调用它的方式

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

现在，当 api 调用成功时，我可以在data 中获取正确的数据，但在失败的情况下无法获取错误数据。如果出现错误，我的自定义钩子会提前返回，但同样无法在调用它的反应组件中解构。这里有什么问题？

【问题讨论】：

这些数据类型不是和他们期望的不一致吗？ state 需要一个数组，errorMsg 需要一个对象——在这两种情况下你都提供了字符串。
一，你只是从钩子返回state，而不是错误。其次，您在fetch 之外设置状态，而response 不可用
@rrd 正确的方法是什么？我想保留成功的 api 调用数据并更新错误的数据？

标签： javascript reactjs react-hooks

【解决方案1】：

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

试试这个：

    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');

希望对你有帮助

【讨论】：