React学习：自定义useFetch Hook内部useEffect未触发问题

核心问题 #

你的useFetch Hook中未导入React的useState和useEffect，这会导致React抛出Hook初始化错误，直接导致useEffect无法执行，response始终为null。

修复步骤 #

1. 补充Hook导入 #

在utils.js顶部添加React Hook的导入语句：

import { useState, useEffect } from 'react';

只有正确导入后，useState和useEffect才能正常工作，useEffect才会在组件挂载/依赖变化时触发。

2. 验证getRequest函数实现 #

确保getRequest是正确的异步请求函数，示例实现如下：

export async function getRequest(url) {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`请求失败：${response.statusText}`);
  }
  return await response.json();
}

如果getRequest存在错误，即使useEffect触发，也会进入catch分支，response仍会保持null。

3. 额外优化点 #

• 移除不必要的setResponse暴露：你的useFetch返回了setResponse，这会破坏Hook的封装性，建议调整返回值为[response, error, isLoading]，避免外部直接修改内部状态。
• 补充App.js中的data状态定义：onSave中调用了setData，但代码中未定义data状态，需添加：

  const [data, setData] = useState([]);
  

验证修复 #

完成上述修改后，重新运行应用：

• useEffect内部的console.log(url)会正常打印/items
• 请求成功后response会被更新为接口返回的数据，organizedData也会基于有效数据进行处理

内容的提问来源于stack exchange，提问作者pierrepit