单击时在 React 和 Redux 中更新数组中的数据

Question

我在单击按钮时更新 TextField 中的 productCode 时遇到问题。当产品没有错误并且必须从 saveProductResponse 获取新的 productCode 时，我需要更新 productCode。 saveProductResponse 是没有错误的产品的结果。 saveProductResponse 有一个名为 name 的字段。你得到它的中间字母进行过滤，让 productCode 广告匹配 products productCode，当你匹配它之后，你用它的新 productCode 替换它。我认为您必须在 appConstants.SAVE_PRODUCT_SUCCESS:

中的减速器中进行过滤

CODESANDBOX

预期要显示的产品代码

ABCDO
FF
GG

代码

export const getProductCode = (code) => {
  return (
    code.replace(/\.[^/.]+$/, "").split("_")[1] ||
    code.replace(/\.[^/.]+$/, "").split("_")[0] ||
    ""
  );
};

Answer 1

给定 API 更正 productCode 值的响应，需要在状态中更新：

[
  {
    newProductCode: "ABCDO",
    oldProductCode: "AA"
  },
  {
    newProductCode: "DQDESS",
    oldProductCode: "EE"
  }
]

你可以减少这个数组，并且对于每个“更新”检查状态是否包含具有相应匹配 oldProduceCode 的产品，如果是，浅复制 products 数组和通过浅复制更新特定产品，否则保存当前产品和状态并继续下一个。

case appConstants.SAVE_PRODUCT_SUCCESS:
  return saveProductResponse.reduce((state, current) => {
    const shouldUpdate = state.products.some(
      (product) => product.productCode === current.oldProductCode
    );

    if (!shouldUpdate) return state;

    return {
      ...state,
      products: state.products.map((product) =>
        product.productCode === current.oldProductCode
          ? {
              ...product,
              productCode: current.newProductCode
            }
          : product
      )
    };
  }, state);

单击时在 React 和 Redux 中更新数组中的数据

Update Data in Array in React and Redux When Clicked

ecmascript-6

reactjs

redux

react-redux

react-hooks