React/Redux射擊動作 - >在更新商店前渲染

Question

A有一個簡單的react/redux應用程序。我從API異步獲取數據，但不等待數據並觸發渲染的組件。

class RestaurantList extends React.Component { 
componentWillMount() { 
    this.props.getRestaurantList(); 
} 

render() { 
    console.log("render"); 
    let {translation} = store.getState().app; 
    //------------I NEED DATA ON THIS LET (restaurantList) 
    let {restaurantList} = this.props.restaurants; 


    return (
     <div> 
      <TableContainer data={restaurantList}/> 
     </div> 

    ) 


    } 
} 
const mapStateToProps = (state) => { 
return { 
    restaurants: state.restaurants 
}; 
}; 

const mapDispatchToProps = (dispatch) => { 
    return { 
     getRestaurantList() { 
      dispatch(ACTIONS.getRestaurantList()); 
     }, 
    }; 
}; 

export default connect(mapStateToProps, mapDispatchToProps)(RestaurantList); 

在我行動我使用Axios公司獲取數據：

export function getRestaurantList() { 
console.log("action"); 
return dispatch => { 
    axios({ 
     method: "GET", 
     url: URLS.BASE_URL + URLS.URL_RESTAURANT_LIST 
    }).then((response) => { 
     console.log(response); 
     dispatch({ 
      type: CONST.GET_RESTAURANT_LIST, 
      payload: response.data 
     }) 
    }) 
} 
} 

在那之後我的組件燒製方法ComponenWillMount渲染（）和下一個店，其更新專門店，並設置好數據我變量。也許你給我建議如何做到這一點，因爲我現在在我的桌子上轉移undefined開始。也許你給了我一個例子來使用另一個框架，比如redux-saga或其他。

Answer 1

你可以嘗試有條件地渲染你TableContainer組件，因此該表將僅呈現一次有數據可供選擇：

renderTable() { 
    let { restaurantList } = this.props.restaurants 

    if (restaurantList) { 
    return <TableContainer data={ restaurantList } /> 
    } else { 
    return <div></div> 
    } 
} 

render() { 
    return (
    <div> 
     { this.renderTable() } 
    </div> 
) 
}