如何用反应取代组件的状态?

时间:2017-01-15 10:05:58

标签: reactjs state

我在currentMenu

的组件中有一个本地状态MenuItemContainer
export default class MenuItemsContainer extends React.Component {
 constructor () {
  super();
  this.state = {
  currentMenu: [],
  };
}

我使用下面的函数menu_items渲染_renderMenuItem

_renderMenuItems(menuitems) {
    const { order } = this.props;

    return menuitems.map((menuitem) => {
        if (menuitem.category_id == this.props.order.currentCategoryId) {
                this.state.currentMenu.push(menuitem)

        else {
            return false;
        }

        return <MenuItem
                key={menuitem.id}
                order={order}
                dispatch={this.props.dispatch}
                channel={this.props.order.channel}
                {...menuitem} />;
    });
}

我想要对currentMenu做的是存储menuItems category_id menuItem等于currentCategoryId订单状态。

现在我正在使用push(menuitem)将这些项目推送到州。但是,在currentMenu中,只有当menuItem的category_id等于订单状态的currentCategoryId时才应存储它。因此,如果currentCategoryId发生变化,则应重置currentMenu并获取新的menuItem

我该怎么做? 提前致谢

1 个答案:

答案 0 :(得分:0)

为了实际触发状态更改,您需要通过setState执行此操作 所以你可以在_renderMenuItems方法的末尾添加一个setState命令,如下所示:

functional programming

但更好的做法是让状态已经包含正确的项目,而不是在render方法中对其进行过滤。

我不确定你的例子是如何得到menuItems的,但理论上你应该从它们构建状态然后调用_renderMenuItems方法(将使用状态)