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

Question

I have one component App.js which has a fetch api with credential . In render i have condition if last view is 1 open image view component else go to gallery component

Like This Condition Now this issue is that when app.js load api load in second time and first render work then again fetch api get data and ImageView this.state.data is null and so in imageView component i can't get props.

Api call service file

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 main file

 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

You need to use a constructor in the Imageview class, to get the props from the App.js .

Example:

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

Hope this helps!