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