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

我的组件在render（）之后触发方法ComponenWillMount，然后更新存储并将好数据设置为我的变量。也许你给我建议如何做我的渲染我的获取数据，因为现在在我的桌子上我开始转移 undefined 。也许你给我一个例子来使用另一个框架，比如redux-saga或其他。

Answer 1

您可以尝试有条件地渲染 TableContainer 组件，这样只有在有数据可用时才会呈现表格：

samtools_merge_bam

React / Redux触发操作 - >在更新商店之前渲染

1 个答案: