reactjs - 在 ReactJs 中传递 API 数据

问题描述

我调用了我的 API 并在主页上获取了数据，我正在使用道具将数据发送到我主页的子组件。我可以从主页将课程数据发送到我的网格组件，它工作正常。问题是，当尝试从另一个组件打开我的网格组件时，我必须使用没有意义的道具再次发送课程数据，因为某些组件与课程数据无关，但它们仍然需要携带课程-数据，以便他们可以将其发送到我的 corse-grid 组件。（课程网格组件链接在我的导航栏中，这意味着每个其他页面都可以访问它。现在我的问题是，当我进行初始 API 调用并且没有无论用户从它打开什么其他组件仍然有足够的信息。

Below is my code for my homepage as you can see it renders the <Header/>, some other components do it too, So I am just wondering do i need to always pass data in props like I am doing here in

import React, { Component, useState} from 'react';
import Header from './components/Header';
import HeroSlider from './components/HeroSlider';
import IconBox from './components/IconBox';
import AboutUs from './components/AboutUs';
import CourseFilter from './components/CourseFilter';
import TestimonialSlider from './components/TestimonialSlider';
import FaqEvent from './components/FaqEvent';
import TeamSlider from './components/TeamSlider';
import HelpArea from './components/HelpArea';
import HomeBlog from './components/HomeBlog';
import CampusTour from './components/CampusTour';
import NewsletterForm from './components/NewsletterForm';
import Footer from './components/Footer';






export default class HomeOne extends Component {

    state = {
        courseData: null
      }


    
    componentDidMount() {

        const request = async () => {
            const response = await fetch('http://127.0.0.1:5000/')
            const json = await response.json();
            this.setState({ courseData: json })
            console.log(json);
            {console.log("This jsut happended")}
        }

        request();

        
      }
    

    render() {

        if (!this.state.courseData) {
            
            return <div />
            
        }
      
        return (
            <div className="main-wrapper" >

                {/* Header */ }
                < Header courseInfo={this.state.courseData}/>

                {/* Hero Slider */}
                < HeroSlider />

                {/* Icon Box */}
                < IconBox />

                {/* About Area */}
                < AboutUs />

                {/* Course Filter */}
                < CourseFilter courseInfo={this.state.courseData}/>

                {/* Testimonial Slider */}
                < TestimonialSlider />

                {/* Faq & Event Area */}
                < FaqEvent />

                {/* Team Slider */}
                < TeamSlider />

                {/* Help Area */}
                < HelpArea />

                {/* Blog Area */}
                < HomeBlog />

                {/* Newsletter Form */}
                < NewsletterForm />

                {/* Footer */}
                < Footer />

            </div >
        )
    }
}

标签： reactjsreact-props

reactjs - 在 ReactJs 中传递 API 数据

问题描述

解决方案

推荐阅读