API 数据未传递到主函数，因为它是异步的

Question

我正在制作一个使用reactjs显示新闻数据的网站。

这是我的代码：

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`

function apiCall(){
  fetch(apiUrl, {
    method: 'GET'
  })
    .then(response => response.json())  // Parsing the JSON response
    .then(data => {
      var headlines = data.data[0].title;  // Handling the response data
      console.log(headlines)
    })
    .catch(error => {
      console.error('Error:', error);  // Handling errors
    });
}

function App() {

  var headlines = apiCall();;


  return (
    <div className="App">
      <Header></Header>
      <Container>
        <Row>
          <Col><Chart></Chart></Col>
          <Col><Headline headline = {headlines}></Headline></Col>
        </Row>
    </Container>
      <Footer></Footer>
    </div>
  );
}

export default App;

我可以通过使用 console.log 检查来成功地从 api 检索数据，但是我无法将数据获取到我的 App 函数中，因为 api 是异步的。我尝试在 api 函数后面添加异步标记，但遇到错误：

“未捕获的错误：对象作为 React 子对象无效（发现：[object Promise]）。如果您打算渲染子对象的集合，请改用数组。”

我没有传递一个对象，只是传递一个变量（例如“在地球旁边发现了新的小行星！”）。

如有任何答案，我们将不胜感激。

Answer 1

对不起我的英语，我正在学习。您正在尝试发出请求，但“fetch”函数返回一个承诺，但您的应用程序正在尝试在数据可用之前分配“apiCall”的响应。

尝试使用此代码：

//your imports...

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

function apiCall() {
  return fetch(apiUrl, {
    method: 'GET'
  })
    .then(response => response.json())
    .then(data => data.data[0].title)
    .catch(error => {
      console.error('Error:', error);
    });
}

function App() {
  const [headlines, setHeadlines] = useState(''); //create a state here


  useEffect(() => {
    // await the response and set the state
    async function fetchHeadlines() {
      const headlineData = await apiCall();
      setHeadlines(headlineData);
    }

    fetchHeadlines();
  }, []);

  return (
    <div className="App">
      <Header />
      <Container>
        <Row>
          <Col><Chart /></Col>
          <Col><Headline headline={headlines} /></Col> 
        </Row>
      </Container>
      <Footer />
    </div>
  );
}

export default App;