Javascript 对使用效果感到困惑

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

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和一个

headers

对象，该对象包含一个AWS Cognito授权密钥，如下所示：

authorization:eyJraWQiOiJVNW…

（为了简洁而缩短）

执行此操作时，上的

选项

对象确实存在于

useffetch

中，但在

useffect

构造中它是空的。然而，在这两种情况下，

url

字符串都是正确填充的

---

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

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

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

“内部使用获取”输出3次：

挂载时（

useffect（（）=>…，[]

）

第一次状态更改后（

setLoading（true）

）

第二次状态更改后（

setLoading（false）

）

而“内部使用效果”在挂载时输出1次（

useffect（（）=>…，[]

）

由于这种方式不适用于您，这可能意味着当组件装载时，选项还不可用

当您将选项作为依赖项放置时，useEffect会被调用两次，第一次获取失败（很可能是因为缺少选项），您对此进行了确认

我敢肯定，使用自定义挂钩，您会发现组件父级中的选项存在问题

const axios={
获取：（url，选项）=>{
返回新的承诺（resolve=>setTimeout（（）=>resolve（{status:200，data:'helloworld'}），2000））；
}
};
const-AppContext=React.createContext（{app:null}）；
const useFetch=（url，选项）=>{
const[data，setData]=React.useState（）；
常量[loading，setLoading]=React.useState（true）；
const{app}=React.useContext（AppContext）；
log（'**Inside-useFetch:options='，JSON.stringify（options））；
React.useffect（（）=>{
log（'**Inside-useffect:options='，JSON.stringify（options））；
常量fetchData=函数（）{
设置加载（真）；
const response=axios.get（url、选项）
。然后（响应=>{
如果（response.status==200）{
setData（response.data）；
}
设置加载（假）；
})
.catch（错误=>{
设置加载（假）；
投掷误差；
});
};
fetchData（）；
}, []);
返回{加载，数据}；
};
常量应用=（{url，options}）=>{
const{loading，data}=useFetch（url，选项）；
返回(
{正在加载？'正在加载…'：数据}
);
};
ReactDOM.render(
,
document.getElementById（'root'））
)；

我认为这是一个异步计时问题。我在

useffect

中添加了

options

作为依赖项，现在它似乎可以工作了。也就是说，现在有2个对API端点的调用，第一个调用返回了

401

错误。我想我可以在异步函数调用周围构建一个

if…then

尽管我似乎完全错了。我的代码的底部现在看起来是这样的：```if（options）{fetchData（）；}；}，[options]）“``但是，该函数被父组件调用了两次。我还不知道这是因为我一直在讨论的代码中有缺陷还是父组件中有什么问题。正如我在下面的回答中所解释的，我很确定问题来自使用此钩子的组件，而不是钩子本身。您能提供更多的代码说明吗如何使用它？非常感谢您的回答！因此，

options

填充了AWS访问令牌头字符串，该字符串永久存储在这里的每个会话中：

const{appStore}=useContext（AppContext）；

在

useffect

构造之上我这样做：``var options；if（appStore.awsConfig）{options=appStore.awsConfig；}“``为什么

appStore.awsConfig

值不能立即使用，我仍然感到困惑……但事实并非如此！上下文API数据存储似乎具有异步性质，这是我没有预料到的。我认为上下文不是异步的。这可能是因为会话是在更高的祖先装载时填充的。组件是在所有的祖先装载时装载的。”他的孩子们已经上马了，所以当使用钩子的组件上马时，他的祖先还没有上马。。。。