Javascript 从react-useEffect自定义挂钩提前返回未得到destructure

我有一个react自定义钩子，它正在使用

useffect

。这个钩子应该使用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组件中分解结构。这里怎么了

我认为您没有看到错误数据的原因是您没有从

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

---

希望这有帮助

我相信您没有看到错误数据的原因是您没有从

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

---

希望这有帮助

这些数据类型与他们的期望不一致吗？state需要一个数组，errorMsg需要一个对象-在这两种情况下都提供字符串。第一，您只从钩子返回

state

，而不是返回错误。其次，您正在设置

fetch

之外的状态，而

response

不在其中available@rrd去那里的正确方法是什么？我想保存成功的api调用数据，并更新错误的数据？这些数据类型与他们期望的不一致吗？state需要一个数组，errorMsg需要一个对象-在这两种情况下都提供字符串。第一，您只从钩子返回

state

，而不是返回错误。其次，您正在设置

fetch

之外的状态，而

response

不在其中available@rrd去那里的正确方法是什么？我想保存成功的api调用数据并更新错误的数据？