React中如何展示Fetch请求响应数据？排查我的代码问题

几个核心错误点 #

• 初始状态类型不匹配：你把orders的初始值设成了数组[]，但接口返回的是包含asks、bids字段的对象。组件初始化时orders是数组，此时访问orders.asks会得到undefined，直接渲染会显示空白或者触发警告。
• 直接渲染数组数据：orders.asks是二维数组（每一项是包含价格、数量的子数组），React无法直接在JSX里渲染数组，必须转换成可渲染的文本或元素。
• 未处理加载/异常状态：请求未完成时，orders是初始值，直接访问orders.asks可能报错；请求失败时也没有对应的提示。

修正后的代码 #

function App() {
  const url = 'https://api.gemini.com/v1/book/btcusd'
  // 初始状态设为null，明确区分未加载状态
  const [orders, setOrders] = useState(null)
  const [error, setError] = useState(null)

  const fetchData = () => {
    fetch(url)
      .then(response => {
        if (!response.ok) {
          throw new Error('请求失败')
        }
        return response.json()
      })
      .then(data => {
        setOrders(data)
        setError(null)
      })
      .catch(error => {
        setError(error.message)
        setOrders(null)
      })
  }
  
  useEffect(() => {
    fetchData()
  }, [])

  // 加载状态
  if (!orders && !error) {
    return <div className="App">加载中...</div>
  }

  // 错误状态
  if (error) {
    return <div className="App">错误：{error}</div>
  }

  return (
    <div className="App">
      <h2>卖单（Asks）</h2>
      <ul>
        {/* 遍历asks数组，生成可阅读的列表项 */}
        {orders.asks.map((item, index) => (
          <li key={index}>
            价格：{item[0]}，数量：{item[1]}
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

关键修正说明 #

1. 将orders初始状态改为null，便于判断数据是否加载完成
2. 添加error状态，处理请求失败的场景
3. 遍历orders.asks数组，把每个子数组的内容转换成可读文本渲染
4. 增加加载中和错误状态的UI反馈，提升用户体验

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