在 ReactJs 中传递 API 数据
Passing API data in ReactJs
我调用了我的 API 并获取了主页上的数据,我正在使用 props 将数据发送到我主页的子组件。我可以将课程数据从主页发送到我的网格组件,它工作正常。问题是,当尝试从另一个组件打开我的网格组件时,我必须使用道具再次发送课程数据,这没有意义,因为一些组件与课程数据无关,但它们仍然需要进行课程-数据,以便他们可以将其发送到我的 corse-grid 组件。 (课程网格组件 link 在我的导航栏中,这意味着每个其他页面都可以访问它。现在我的问题是,有没有一种方法可以在我进行初始设置时在开始时设置我的课程网格组件的数据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 >
)
}
}
答案是是,如果你不使用这个叫做store
的概念的话。您添加的代码片段解释了如何将数据从父组件传递到子组件。如果您不想像以前那样将数据从父级传递给子级,您应该使用 redux 的 STORE
全局存储数据,以便随时随地访问数据。
我调用了我的 API 并获取了主页上的数据,我正在使用 props 将数据发送到我主页的子组件。我可以将课程数据从主页发送到我的网格组件,它工作正常。问题是,当尝试从另一个组件打开我的网格组件时,我必须使用道具再次发送课程数据,这没有意义,因为一些组件与课程数据无关,但它们仍然需要进行课程-数据,以便他们可以将其发送到我的 corse-grid 组件。 (课程网格组件 link 在我的导航栏中,这意味着每个其他页面都可以访问它。现在我的问题是,有没有一种方法可以在我进行初始设置时在开始时设置我的课程网格组件的数据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 >
)
}
}
答案是是,如果你不使用这个叫做store
的概念的话。您添加的代码片段解释了如何将数据从父组件传递到子组件。如果您不想像以前那样将数据从父级传递给子级,您应该使用 redux 的 STORE
全局存储数据,以便随时随地访问数据。