Redux首次触发updatePrice后updatedProducts为空 视图不更新如何解决？

• Redux 状态更新是异步流程，你在调用 updatePrice 后立刻在同一个同步代码块中打印 updatedProducts，此时组件还未完成重渲染，拿到的是更新前的初始空数组值，后续修改时拿到的是上一次更新后的状态，所以看起来第一次为空、后续正常。
• 隐藏的不可变原则违反问题：你更新价格时仅对 allProducts 做了外层数组浅拷贝，直接修改了数组内商品对象的 price 属性，相当于直接修改了 Redux 中的 allProducts 原状态，会导致后续状态管理出现不可预期的问题。
• 首次拉取商品列表后没有同步初始化 updatedProducts，导致初始状态下 updatedProducts 为空数组。

1. 修正 Reducer 初始赋值逻辑 #

拉取到全量商品列表时，同步初始化 updatedProducts，避免初始值为空：

// AdminPricingReducer 中修改 VIEW_ALL_PRODUCTS 分支
case VIEW_ALL_PRODUCTS: {
  return { ...state, allProducts: all_products, updatedProducts: all_products };
}

2. 修正 updatePrice action 的不可变更新逻辑 #

修改商品价格时，对匹配到的商品对象也做浅拷贝，不修改原状态：

export const updatePrice = (price, id, allProducts) => dispatch => {
  const newArray = allProducts.map((product, index) => {
    if (index === id) {
      // 返回新对象，仅修改价格字段
      return { ...product, price };
    }
    return product;
  });
  dispatch({
    type: UPDATE_PRICE,
    updated_products: newArray,
  });
};

3. 修正状态读取逻辑 #

组件渲染表单时优先读取 updatedProducts 的值，保证输入框显示最新修改后的价格：

// 组件内渲染逻辑修改
const productList = updatedProducts.length ? updatedProducts : allProducts;
return (
  <>
    {productList.length !== 0 &&
      productList.map((product, index) => (
        // 原有渲染逻辑保持不变
      ))}
  </>
)

4. 修正打印/后续逻辑的触发时机 #

不要在调用 updatePrice 后立刻读取 updatedProducts，改为通过 useEffect 监听 updatedProducts 变化触发对应逻辑：

// 组件内添加 useEffect
useEffect(() => {
  // 状态更新完成后才会执行此处逻辑，拿到的是最新值
  console.log(updatedProducts);
  // 显示Edited标签等后续逻辑也放在此处执行
}, [updatedProducts]);

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