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

Posted 2023-02-22

【中文标题】单击时更新 React 和 Redux 中的数组中的数据

【英文标题】：Update Data in Array in React and Redux When Clicked

【发布时间】：2021-12-30 04:41:22

【问题描述】：

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

CODESANDBOX

预期显示的产品代码

ABCDO
FF
GG

代码

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

【问题讨论】：

你需要在reducer中更新productCode到什么？保存产品操作负载中的数据似乎与产品状态中的数据相匹配。我在这里想念什么？如果 productCode 有匹配项，您是否要替换 productImages 数组中的整个“图像”对象？

@DrewReese。好点德鲁。可以做两个版本吗？首先在formik TextField上更改productCode，这可能因为redux连接到formik吗？第二个在减速器本身。

@DrewReese。您始终可以从saveProductResponse

获得更新的产品代码

@DrewReese.savedProductResponse 有一个名为 name 的字段。你可以使用我实现的getProductCode() 来获得它的productCode。然后将其与products productCode 进行比较，以便您可以访问它。在products 中，您有productImages，您将比较它与action.payload（如果存在）。那么您就可以在其产品上更改其productCode

所以在saveProductResponse 中，您拥有具有不同产品代码的对象，例如"ABCDO" 用于图像"01_AA_BBB.jpg"。并且当发送保存成功时，产品代码是来自文件名的"AA"。您只是希望将此保存成功对象添加到 "AA" 产品图像数组中？

【参考方案1】：

鉴于需要在状态中更新的更正 productCode 值的 API 响应：

[
  
    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);