React自定义hook调用名言API无报错无返回，如何排查问题？

核心错误原因 #

• 接口返回结构匹配错误：你调用的https://type.fit/api/quotes返回值是一个包含所有名言对象的数组，每个数组元素结构为{text: "名言内容", author: "作者"}，不存在你写的data.value属性，所以setQuote(data.value)实际是把undefined存入了state，自然不会渲染任何内容。
• 缺少随机取值逻辑：就算正确拿到完整的名言数组，也需要手动从数组中随机取一条的text字段，才能实现随机名言展示的需求。
• useState无初始值：首次渲染时quote为undefined，虽然不会直接报错，但渲染空内容的体验不好。

修复后完整代码 #

import { useState, useEffect } from 'react';

function App() {
  // 给state设置初始默认值
  const [quote, setQuote] = useState('加载中...');
  // 新增存储全部名言数组的state，方便后续点击按钮重新随机
  const [quoteList, setQuoteList] = useState([]);

  useEffect(() => {
    const fetchQuote = async () => {
      try {
        const response = await fetch("https://type.fit/api/quotes");
        const data = await response.json();
        // 先把全量名言列表存起来
        setQuoteList(data);
        // 随机取一条的text字段存入quote
        const randomIndex = Math.floor(Math.random() * data.length);
        setQuote(data[randomIndex].text);
      } catch (err) {
        setQuote('名言加载失败，请刷新重试');
        console.error('请求错误：', err);
      }
    }
    fetchQuote();
  }, [])

  // 新增点击按钮随机切换名言的逻辑
  const getRandomQuote = () => {
    const randomIndex = Math.floor(Math.random() * quoteList.length);
    setQuote(quoteList[randomIndex].text);
  }

  return (
    <div>
      <h1>Random Quotes</h1>
      <p>{quote}</p>
      <button onClick={getRandomQuote}>Click For Random Quotes</button>
    </div>
  );
}

export default App;

修复说明 #

1. 统一用async/await写法，避免和.then混用造成的逻辑歧义，新增错误捕获逻辑，避免接口异常时完全无提示
2. 新增quoteList存储全量名言数据，不用每次点击按钮都重新请求接口
3. 实现了点击按钮随机切换名言的逻辑，符合业务需求
4. 给state添加了默认值和加载失败的兜底文案，体验更友好

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