[英]React js Render works before Fetch get value
我有一个组件 App.js,它有一个带有凭证的 fetch api。 在渲染中,如果最后一个视图是 1 个打开的图像视图组件,我有条件,否则转到图库组件
像这种情况现在这个问题是当 app.js 第二次加载 api 加载并首先渲染工作然后再次获取 api 获取数据和 ImageView this.state.data 为空,所以在 imageView 组件中我无法获取道具。
api调用服务文件
import fetchival from 'fetchival';
const CLIENT_ID = 'your id';
const apiBase = 'https://api.imgur.com/3';
const request = fetchival(apiBase, {
mode: 'cors',
headers: {
Authorization: 'Client-ID ' + CLIENT_ID
}
});
export function searchGallery(section = 'hot',) {
return request('gallery/' + section ).get();
}
App.js 主文件
async loadImages(section,sort,page = 0) {
try {
let result = await searchGallery(section, sort, page);
this.setState({data: result.data, page: page, loaded: true});
} catch (e) {
}
}
onClick = (e) => {
e.preventDefault()
this.loadImages(e.target.text.toLowerCase());
}
componentDidMount() {
this.loadImages();
}
render() {
return (
<div className="warpper">
this.state.imageView ?
<ImageView {...this.state.data[this.state.activeID]}
_closeImageView={this._closeImageView.bind(this)} />
:
<Gallery data={this.state.data}
_openImageView={this._openImageView.bind(this)} />
</div>
)
Image View Component is not geting this.props from app js
class ImageView extends React.Component {
render() {
return (
<div className="imageview-wrapper fadeIn">
<div className="imageview">
<Image CSSClass="imageview-image"
src={this.props.src}
alt={this.props.name} />
<div className="imageview-info">
<button className="imageview-close" onClick={this.props._closeImageView}>x</button>
<h2>{this.props.name}</h2>
<p>{this.props.desc}</p>
<h3>Tags</h3>
<ul>
{this.props.tags.map(tag => <li>{tag}</li>)}
</ul>
</div>
</div>
</div>
)
}
}
您需要在使用构造函数Imageview
类,以获得从道具App.js
。
例子:
class ImageView extends React.Component {
constructor(props) {
super(props);
this.setState(initialState you want to use)
}
render() { ...
希望这可以帮助!
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.