レンダリングの前に解決することを約束するのを待つ

Question

私はAPIから取得している大量のデータを持っています。問題は、データが約束から受け取られる前に私のコンポーネントがrenderMarkers関数を呼び出していることだと思います。

私はrenderMarkers関数を呼び出す前にデータを完全に解決するという約束をどのように待つことができますか？

class Map extends Component { 

componentDidMount() { 
    console.log(this.props) 
    new google.maps.Map(this.refs.map, { 
    zoom: 12, 
    center: { 
     lat: this.props.route.lat, 
     lng: this.props.route.lng 
    } 
    }) 
} 

componentWillMount() { 
    this.props.fetchWells() 
} 

renderMarkers() { 
    return this.props.wells.map((wells) => { 
    console.log(wells) 
    }) 
} 

render() { 
    return (
    <div id="map" ref="map"> 
     {this.renderMarkers()} 
    </div> 
) 
} 
} 

function mapStateToProps(state) { 
    return { wells: state.wells.all }; 
} 

export default connect(mapStateToProps, { fetchWells })(Map); 

Answer 1

あなたはすべての情報が取得されるまでローダーを表示するには、このような何かを行うことができます：API呼び出しが終了する前に、レンダリング関数を呼び出す

class Map extends Component { 
    constructor() { 
    super() 
    this.state = { wells: [] } 
    } 

    componentDidMount() { 
    this.props.fetchWells() 
     .then(res => this.setState({ wells: res.wells })) 
    } 

    render() { 
    const { wells } = this.state 
    return wells.length ? this.renderWells() : (
     <span>Loading wells...</span> 
    ) 
    } 
} 

Answer 2

は大丈夫です。 wellsは空の配列です（初期状態）。単純に何も描画しません。 APIからデータを受け取った後、コンポーネントは自動的に再描画されます。これは、小道具の更新（redux store）です。だから問題は見えない。

あなたが本当に自分のレンダリング機能で、たとえばことを確認し、APIデータを受信する前にレンダリングすることを防止したい場合：

if (this.props.wells.length === 0) { 
    return null 
} 

return (
    <div id="map" ref="map"> 
    {this.renderMarkers()} 
    </div> 
)