文章/答案/技术大牛

发布

社区首页 >问答首页 >无法将获取的数据显示给用户界面。

问无法将获取的数据显示给用户界面。
EN

Stack Overflow用户

提问于 2021-02-11 15:30:40

回答 2查看 379关注 0票数 0

它没有显示错误，而且该项目运行得很好。我也可以将数据记录到控制台。但是它不显示在UI中。这是youtube上的一个教程项目

我从API中获取数据，并将其传递给旅游和旅游组件。旅游组件显示获取的数据。

应用程序组件

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;

javascript

reactjs

fetch-api

回答 2

Stack Overflow用户

回答已采纳

发布于 2021-02-11 21:21:17

尝试删除函数中的状态设置，并将其移动以使用效果。让API调用只返回列表，而不是让它检索列表和设置状态。

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

票数 0

Stack Overflow用户

发布于 2021-02-11 15:42:06

试试下面的代码：

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

我认为您的UI没有更新后，数据到达。您需要等待获取数据。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/66157742

复制

相似问题

问无法将获取的数据显示给用户界面。
EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法将获取的数据显示给用户界面。EN

回答 2

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问无法将获取的数据显示给用户界面。
EN