React js Render 在 Fetch 获取价值之前工作

Question

我有一个组件 App.js，它有一个带有 credential 的 fetch api。在渲染中，如果最后一个视图是 1 个打开的图像视图组件，我有条件，否则转到图库组件

喜欢这个 Condition 现在这个问题是，当 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>
            )
        }
    }

Answer 1

您需要在Imageview 类中使用构造函数，从App.js 获取道具。

例子：

class ImageView extends React.Component {
    constructor(props) {
      super(props);
      this.setState(initialState you want to use)
    }
    render() { ...

希望这会有所帮助！