对使用效果感到困惑

Question

我正在构建我的第一个自定义 React Hook，并对我认为代码的一个简单方面感到困惑：

export const useFetch = (url, options) => {
const [data, setData] = useState();
const [loading, setLoading] = useState(true);
const { app } = useContext(AppContext);
console.log('** Inside useFetch: options = ', options);
useEffect(() => {
console.log('**** Inside useEffect: options = ', options);
const fetchData = async function() {
try {
setLoading(true);
const response = await axios.get(url, options);
if (response.status === 200) {
setData(response.data);
}
} catch (error) {
throw error;
} finally {
setLoading(false);
}
};
fetchData();
}, []);
return { loading, data };
};

我传递给useFetch两个参数：一个 url 和一个包含 AWS Cognito 授权密钥的headers对象，如下所示：Authorization: eyJraWQiOiJVNW...(为简洁起见，已缩短(

当我这样做时，options对象确实存在于useFetch内附近，但在useEffect结构中它是空的。 然而，url字符串在这两种情况下都正确填充。

这对我来说毫无意义。 有谁知道为什么会发生这种情况？

Answer 1

下面是代码的实现，显示它按预期工作。

异步/等待已转换为承诺，但应具有相同的行为。

"内部使用提取">输出 3 次：

1. 挂载 (useEffect(()=>..., [](
2. 第一次状态更改后 (setLoading(true)(
3. 第二次状态更改后 (setLoading(false)(

和"内部使用效果">在安装上输出 1 次 (useEffect(()=>..., [](

由于它以这种方式不适合您，因此可能意味着当组件挂载时，选项尚不可用。

当你把选项作为依赖项时，useEffect被调用两次，第一次获取失败(很可能是因为缺少选项(，你确认了这一点。

我很确定您会在使用自定义钩子的组件的父级中找到选项的问题。

const axios = {
get: (url, options) => {
return new Promise(resolve => setTimeout(() => resolve({ status: 200, data: 'Hello World' }), 2000));
}
};

const AppContext = React.createContext({ app: null });

const useFetch = (url, options) => {
const [data, setData] = React.useState();
const [loading, setLoading] = React.useState(true);
const { app } = React.useContext(AppContext);
console.log('** Inside useFetch: options = ', JSON.stringify(options));

React.useEffect(() => {
console.log('**** Inside useEffect: options = ', JSON.stringify(options));
const fetchData = function () {
setLoading(true);
const response = axios.get(url, options)
.then(response => {
if (response.status === 200) {
setData(response.data);
}
setLoading(false);
})
.catch(error => {
setLoading(false);
throw error;
});
};
fetchData();
}, []);

return { loading, data };
};

const App = ({url, options}) => {
const { loading, data } = useFetch(url, options);
return (
<div
style={{
display: 'flex', background: 'red',
fontSize: '20px', fontWeight: 'bold',
justifyContent: 'center', alignItems: 'center',
width: 300, height: 60, margin: 5
}}
>
{loading ? 'Loading...' : data}
</div>
);
};

ReactDOM.render(
<App
url="https://www.dummy-url.com"
options={{ headers: { Authorization: 'eyJraWQiOiJVNW...' } }}
/>,
document.getElementById('root')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root" />