React子组件未及时接收API传递数据问题求助

AI 小北

2026-8-25

问题修复：React组件无法及时获取API数据导致渲染失败

问题根源

请求状态判断逻辑错误：finally会在请求完成（无论成功/失败）时触发，若请求失败data仍为null，此时status=true会直接尝试访问data[0]，抛出Cannot read properties of null错误。
异步状态更新时机冲突：React的setState是异步操作，setData(result)后立刻执行setStatus(true)，可能data还未完成更新就触发组件渲染，导致data[0]未定义。

修复后的代码

App.js

import React from 'react';
import Boxx from './Boxx';

function App(){
  const [data, setData] = React.useState(null);
  const [error, setError] = React.useState(null);

  React.useEffect(()=>{
    fetch('https://the-trivia-api.com/api/questions?categories=science,society_and_culture&limit=5')
      .then(res => {
        if (!res.ok) throw new Error('请求失败');
        return res.json();
      })
      .then(result => setData(result))
      .catch(err => setError(err.message));
  },[])

  if (error) return <div>加载失败：{error}</div>;
  if (!data || data.length === 0) return <div>加载中...</div>;

  return(
    <div className='App--'>
      <Boxx question={data[0].question} answers={data[0].answers} />
    </div>
  )
}

export default App;

Boxx.js

import React from "react";
import './index.css'

export default function Boxx (props) {
  const answers = props.answers || [];
  
  return(
    <div className="questionBody--">
      <p className='qB--question'>{props.question || '暂无问题'}</p>
      <div className="answers--">
        <p className="qB--answer" id='0'>{answers[1] || ''}</p>
        <p className="qB--answer" id='1'>{answers[0] || ''}</p>
        <p className="qB--answer" id='2'>{answers[2] || ''}</p>
      </div>
    </div>
  )
}