无法将获取的数据显示到 React 中的 UI

Question

它没有显示错误，项目工作正常。我也可以将数据记录到控制台。但它不显示在 UI 中。这是 youtube 上的教程项目

我正在从 API 获取数据并将其传递给游览和游览组件。并且 Tour 组件显示获取的数据。

应用组件

import React, { useState, useEffect } from "react";
import Loading from "./Loading";
import Tours from "./Tours";
// ATTENTION!!!!!!!!!!
// I SWITCHED TO PERMANENT DOMAIN
const url = "https://course-api.com/react-tours-project";
function App() {
  const [loading, setLoading] = useState(true);
  const [tours, setTours] = useState([]);

  const fetchTours = async () => {
    try {
      const response = await fetch(url);
      const tours = await response.json();
      setLoading(false);
      setTours(tours);
    } catch (error) {
      setLoading(true);
      console.log(error);
    }
  };

  useEffect(() => {
    fetchTours();
  }, []);

  if (loading) {
    return (
      <main>
        <Loading />
      </main>
    );
  }
  return (
    <main>
      <Tours tours={tours} />
    </main>
  );
}

export default App;

游览组件

import React from "react";
import Tour from "./Tour";
const Tours = ({ tours }) => {
  return (
    <section>
      <div className="title">
        <h2>Our Tours</h2>
        <div className="underline"></div>
      </div>
      <div>
        {tours.map((tour, index) => {
          return <Tour key={tour.id} {...tours} />;
        })}
      </div>
    </section>
  );
};

export default Tours;

游览内容

import React, { useState } from "react";

const Tour = ({ id, image, info, price, name }) => {
  return (
    <article className="single-tour">
      <img src={image} alt={name} />
      <footer>
        <div className="tour-info">
          <h4>{name}</h4>
          <h4 className="tour-price">AUD{price}</h4>
        </div>
        <p>{info}</p>
        <button className="delete-btn">Not Interested</button>
      </footer>
    </article>
  );
};

export default Tour;

Answer 1

试试这个代码：

 useEffect(async () => {
   await fetchTours();
  }, []);

我想你的UI在数据到达后还没有更新。您需要等待您的数据被提取。

Answer 2

尝试去掉函数中state的设置，移到use effect上。让 API 只调用 return 列表，而不是让它检索列表和设置状态。

    const fetchTours = async () => {
          const response = await fetch(url);
          const tours = await response.json();
          return tours;
      };
    
      useEffect(() => {
        const fetchAndSetTourState = async () => {
         const data = await fetchTours();
         setTours(data);
         setLoading(false);
     }
     fetchAndSetTourState();
    }}, []);

无法将获取的数据显示到 React 中的 UI

Cannot display Fetched data to the UI in React

javascript

reactjs

fetch-api