我有一个名为 App 的父组件。我想将从 api 获取的数据（包括随机问题和答案）发送到子组件。在子组件（QuestionGrid）中，当我想从 api 获取数组中的第一个问题时，我遇到了错误。我想使用 console.log(items[0].question) 查看第一个问题，但它会引发错误。但是当我使用 console.log(items) 时，它允许我查看它们。我也知道在加载后获取数据。我还使用了 useEffect 。这是我的父组件

import './App.css';
import React, { useState,useEffect} from 'react';
import QuestionGrid from './components/QuestionGrid';
function App() {
  const [error, setError] = useState(null);
  const [isLoaded, setIsLoaded] = useState(false);
  const [items, setItems] = useState([]);

  useEffect(() => {
    fetch("https://opentdb.com/api.php?amount=40&category=9&difficulty=medium&type=multiple")
      .then(res => res.json())
      .then(
        (result) => {
          setIsLoaded(true);
          setItems(result.results);
        },
    
        (error) => {
          setIsLoaded(true);
          setError(error);
        }
      )
  }, [])
  
 
  return (
    <div className="App">
  <QuestionGrid isLoaded={isLoaded} items={items}/>      
    </div>
  );
}

export default App;

这是我的子组件

import React, { useState, useEffect } from 'react';
export default function QuestionGrid({ isLoaded, items }) {

   if(isLoaded){
       console.log(items[0].question)
   }


  return isLoaded ? 
  <section className="cards">

      </section> : <h1>Loading</h1>;
}