在StackBlitz中使用React自定义Hook报错，求修复方案

问题根源与修复步骤 #

• 模块导入语法错误
  useFetch.js中导入React模块时未给react添加引号，这是触发Module undefined依赖错误的直接原因。
  错误代码：

  import { useState,useEffect } from react;
  

  修复后：

  import { useState, useEffect } from 'react';
  

• 未定义url参数
  自定义Hook中使用了url变量但未声明，需为useFetch添加参数接收外部传入的url，否则useEffect依赖数组中的url会无效。
  错误的函数定义：

  const useFetch = () => {
  

  修复后：

  const useFetch = (url) => {
  

• 可选优化：添加请求错误处理
  为避免fetch请求失败导致的异常，可在Promise链中增加错误捕获逻辑：

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data))
      .catch((err) => console.error('请求出错:', err));
  }, [url]);
  

完整修复后的useFetch.js代码 #

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data))
      .catch((err) => console.error('请求出错:', err));
  }, [url]);

  return [data];
};

export default useFetch;

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