Question

无法弄清楚这里发生了什么，但是基本上我有一个包含大量产品的json文件。我正在尝试渲染我想要的

这是我的减速器：

export default(state = initialState, action) => {
  switch(action.type){
    case Types.SHOW_PRODUCTS: {
      console.log('here1');
      let productsToShow = data.filter(category => category.link === action.category)
      const newState = [].concat(productsToShow[0].products)
      return newState;
    }
    default:
      console.log('here2');
      return state;
  }
}

当我在商店中记录状态时，它说productsToRender是长度为5的数组（这是正确的）

但是，当我登录（this.props）一个组件时，它表示长度为0

在上述化简器中的

，console.log（'here 1'）是最后一个被调用的控制台日志，这意味着它肯定是返回产品（已在商店状态下验证）。因此我不确定为什么要在该组件中擦除它？

在该组件中，我称之为

  componentWillMount = () => {
    this.props.showProducts(this.props.chosenCategory.category)
  }

通过选择的类别，所以我现在要渲染什么产品

但是，在下面的render方法中记录this.props却显示它是一个空数组

当然，如果有必要，我可以发布更多代码，但是出于这种时髦行为有什么原因吗？

其他信息：

当我这样做时有趣的是：

    default:
      console.log('here2');
      return [{name: 'prod'}];
  }

然后登录this.props，它现在包含带有该对象的该数组？？

Answer 1

存储应该是不可变的，也就是说，您返回的值应该是不可变的。我假设您在商店中仅添加了一个数组尝试像这样改变减速器，

const initialState = [];

export default(state = initialState, action) => {
  switch(action.type){
    case Types.SHOW_PRODUCTS: {
      console.log('here1');
      let productsToShow = data.filter(category => category.link === action.category)
      let newState = [...state,...productsToShow[0].products]
      return newState;
    }
    default:
      console.log('here2');
      return state;
  }
}

减速器和存储状态不同步

1 个答案: