React异步API数据无法传递至App函数的问题求助

核心问题：你直接把apiCall()的结果赋值给headlines，不管加不加async，这个结果都是Promise对象，React无法直接渲染Promise，所以会抛出「Objects are not valid as a React child」的错误。需要用React的状态管理和副作用钩子来处理异步数据。

修正方案及完整代码 #

import { useState, useEffect } from 'react';
import Header from './components/header';
import Footer from './components/footer';
import Chart from './components/chart';
import Headline from './components/headline';
import Container from 'react-bootstrap/Container';
import Row from 'react-bootstrap/Row';
import Col from 'react-bootstrap/Col';
import 'bootstrap/dist/css/bootstrap.min.css';
import './App.css';

const apiUrl = `https://api.thenewsapi.com/v1/news/top?api_token=${apiKey}&locale=us&limit=1`

// 修改apiCall，让它返回Promise，最终resolve获取到的头条标题
async function apiCall(){
  try {
    const response = await fetch(apiUrl, { method: 'GET' });
    const data = await response.json();
    return data.data[0].title;
  } catch (error) {
    console.error('Error:', error);
    return '获取新闻失败'; // 错误时返回兜底文本
  }
}

function App() {
  // 用useState定义状态，存储头条数据和加载状态
  const [headline, setHeadline] = useState('');
  const [isLoading, setIsLoading] = useState(true);

  // 组件挂载时调用API，更新状态
  useEffect(() => {
    async function fetchData() {
      const result = await apiCall();
      setHeadline(result);
      setIsLoading(false);
    }
    fetchData();
  }, []); // 空依赖数组确保只在组件挂载时执行一次

  return (
    <div className="App">
      <Header></Header>
      <Container>
        <Row>
          <Col><Chart></Chart></Col>
          <Col>
            {/* 加载时显示提示，避免渲染空内容 */}
            {isLoading ? '加载中...' : <Headline headline={headline}></Headline>}
          </Col>
        </Row>
      </Container>
      <Footer></Footer>
    </div>
  );
}

export default App;

关键说明 #

• useState用来保存异步获取的数据，状态更新时React会自动重新渲染组件，将最新数据传递给Headline组件
• useEffect是React处理副作用的钩子，这里用来在组件挂载后发起API请求，空依赖数组确保请求只执行一次
• 修改后的apiCall返回实际的头条字符串（或错误兜底文本），通过await可以拿到真实数据而非Promise
• 增加isLoading状态，在数据未返回时给用户明确提示，提升页面体验

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