等待react-promise在呈現之前解析

因此，我從API中檢索了一大組數據。我相信問題是我的組件在從promise中收到數據之前調用renderMarkers函數。等待react-promise在呈現之前解析

所以我想知道如何在調用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);

來源

2017-02-09 Edward Smith

在'componentDidMount'生命週期方法獲取服務器數據。看看這個鳴叫（https://twitter.com/dan_abramov/status/790581793397305345）Dan Abramov –

謝謝，我把它切換了，但是在返回數據之前組件仍然調用渲染函數 –

你可以做這樣的事情，以顯示裝載機直到所有的信息是牽強：

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> 
    ) 
    } 
}

來源

2017-02-09 09:19:06

之前調用API調用完成是好的渲染功能。 wells是一個空數組（初始狀態），你只需渲染任何東西。並且在接收到來自API的數據後，你的組件會自動重新渲染，因爲道具的更新（redux store）。所以我沒有看到問題。

如果你真的想阻止它接收API數據之前渲染，只是檢查，在渲染功能，例如：

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

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

來源

2017-02-09 09:20:22 CodinCat

注意用例你提到的只是一種可能性。實際上，如果你已經有了數據，就讓我們說一個完整的「企業」列表，然後你想要去某個地方列舉幾家企業，那麼你首先會看到整個列表，然後它會縮小。這似乎很奇怪。因此，在顯示過濾列表之前，應該能夠檢查Promise是否已解決。 – mayid

等待react-promise在呈現之前解析

回答

相關問題