products数组元素container属性赋值新对象时意外变为数组的问题

嘿，我一眼就看出你踩了Redux状态更新的经典坑——直接修改原始状态对象，这大概率就是为什么你更新后products[0]的container变成数组的原因！

核心问题：违反Redux的不可变性原则 #

你的代码里直接修改了从getState()拿到的products数组元素：

products[productList].container = containerObj;

Redux的状态是只读的，直接修改原状态不会触发组件更新，还会因为引用共享导致状态混乱，出现你看到的这种预期外的结果（比如container被错误设置成数组）。而且你甚至没dispatch action去更新状态，这等于白改了，状态根本没同步到Redux store里！

正确的修复方式：不可变更新状态 #

要在Redux里更新数组/对象，必须创建新的副本，不能碰原状态。我给你改好了代码：

export const updateSelectedProduct = selectedContainer => (dispatch, getState) => {
  const { selectedProduct, products } = getState().product;
  
  // 用map创建新数组，只修改匹配的元素
  const updatedProducts = products.map(product => {
    if (product.id === selectedProduct.id) {
      // 构建新的container对象
      const containerObj = {
        components: selectedContainer,
        currency: product.container.currency,
        id: product.container.id,
        name: null,
        user: null
      };
      // 返回新的product对象，保留原有属性，替换container
      return { ...product, container: containerObj };
    }
    // 不匹配的元素直接返回原对象就行
    return product;
  });

  // 必须dispatch action让Reducer更新状态！
  dispatch({
    type: 'UPDATE_PRODUCTS', // 换成你实际用的action type
    payload: updatedProducts
  });
};

还要配套修改你的Reducer #

别忘让Reducer正确处理这个action，同样要遵循不可变性：

// 示例Reducer，替换成你自己的Reducer逻辑
const productReducer = (state = initialState, action) => {
  switch (action.type) {
    case 'UPDATE_PRODUCTS':
      // 返回新的状态对象，替换products数组
      return { ...state, products: action.payload };
    // 其他action case
    default:
      return state;
  }
};

额外检查项 #

你可以确认下selectedContainer的类型，如果它本身就是数组，那containerObj.components会是数组，但containerObj本身是对象，这是正常的。之前出现的container变成数组的异常，就是直接修改原状态导致的状态污染，用上面的方法修复后应该就能解决了。

内容的提问来源于stack exchange，提问作者karan02