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();
  }, []);

我认为您的用户界面在数据到达后还没有更新。您需要等待数据被获取。

Answer 2

尽量去掉函数中state的设置，移动到使用效果。让 API 调用只返回列表，而不是让它检索列表并设置状态。

any

无法在 React 中向 UI 显示获取的数据

2 个答案: