React随机引用机器点击换引用按钮崩溃及npm漏洞问题求助

一、点击按钮崩溃的核心问题修复 #

你的代码存在两个关键错误，直接导致点击按钮时程序崩溃：

1. 修正useEffect的错误写法 #

你给useEffect的回调函数添加了参数quoteDBUrl，但useEffect的回调函数不接收任何参数，这会导致内部调用fetchQuotes(quoteDBUrl)时传入的是undefined，请求失败后quotesArray一直保持初始值null。

修正后的useEffect代码：

useEffect(() => {
  fetchQuotes(quoteDBUrl)
}, [quoteDBUrl]);

2. 处理数据加载前的空值情况 #

quotesArray初始值为null，如果在数据请求完成前点击按钮，访问quotesArray.length会直接报错。可以通过两种方式解决：

方案一：将quotesArray的初始状态设为空数组

const [quotesArray, setQuotesArray] = useState([])

方案二：在changeQuote函数中增加空值判断

const changeQuote = () => {
  if (!quotesArray || quotesArray.length === 0) return; // 数据未加载时不执行逻辑
  let randomInteger = Math.floor(quotesArray.length * Math.random());
  setRandomNumber(randomInteger)
  setQuote(quotesArray[randomInteger].quote)
  setAuthor(quotesArray[randomInteger].author)
}

3. 可选：给fetch添加错误处理 #

避免网络请求失败导致quotesArray一直为空，给fetchQuotes函数增加try-catch捕获异常：

const fetchQuotes = async (url) => {
  try {
    const response = await fetch(url)
    if (!response.ok) throw new Error('请求失败')
    const parsedJSON = await response.json();
    setQuotesArray(parsedJSON.quotes)
  } catch (err) {
    console.error('获取名言失败:', err)
    // 设置默认名言数组作为降级方案
    setQuotesArray([{quote: "Money is the Motivation", author:"Lil Wayne"}])
  }
}

二、npm漏洞问题解决 #

132个npm漏洞大概率是依赖版本过旧导致的，按以下步骤操作：

• 删除项目根目录下的node_modules文件夹和package-lock.json文件
• 打开package.json，将react和react-dom版本更新至最新稳定版（如^18.2.0）
• 重新执行npm install
• 运行npm audit查看剩余漏洞，针对性手动升级存在高风险漏洞的依赖包

注意：避免使用npm audit fix --force，该命令可能破坏依赖兼容性，优先选择手动升级稳定版本。

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