从 react useEffect 自定义钩子的早期返回不会解构

Question

我有一个使用useEffect的反应自定义钩子。这个钩子应该使用 JSfetch从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

我相信您没有看到错误数据的原因是您没有从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');

希望这有帮助