无法在调度函数后成功循环通过 redux 存储

问题描述

我正在尝试向名为 cart 的 Redux 商店添加产品项目。添加商品后，我会比较两个商店 product(redux store) 和 cart(redux store)，以检查产品是否具有相同的 itemCode(item code。如果他们这样做，我想隐藏添加按钮并显示删除按钮。不幸的是，我得到了不同的结果，请查看下图以供参考：

interface IProps {
  items: ItemInterface[];
  documentItems: ItemInterface[];
  onAddItem: any;
}

const ItemFlatList2: FC<Partial<IProps>> = ({
  items,documentItems,onAddItem,}) => {
  return (
    <div className={styles.container}>
      <ul>
        {items!.map((item) => {
          return (
            <div className={styles.itemContainer}>
              <div key={item.itemCode}>
                <li>{item.itemCode}</li>
                <li>{item.itemDescription}</li>
                {documentItems!.length === 0 ? (
                  <AddButton
                    title={"ADD"}
                    onClick={() =>
                      onAddItem(
                        item.itemCode,item.itemDescription,item.itemSellingPrice
                      )
                    }
                  />
                ) : (
                  documentItems!.map((documentItem) => {
                    if (documentItem.itemCode === item.itemCode) {
                      return <RedButton title={"Remove"} />;
                    }
                    if (documentItem.itemCode !== item.itemCode) {
                      return (
                        <AddButton
                          title={"ADD"}
                          onClick={() =>
                            onAddItem(
                              item.itemCode,item.itemSellingPrice
                            )
                          }
                        />
                      );
                    }
                  })
                )}
              </div>

              <div>
                <li>Hello world</li>
              </div>
            </div>
          );
        })}
      </ul>
    </div>
  );
};

export default ItemFlatList2;

购物车商店：

const initialState: Partial<DocumentDetailsInterface>[] = [
];

const cartStore = createSlice({
  name: "quotation reducer",initialState,reducers: {
    add: {
      reducer: (
        state,{ payload }: PayloadAction<DocumentDetailsInterface>
      ) => {
        state.push(payload);
      },prepare: (item) => ({
        payload: item,}),},edit: (state,{ payload }) => {},remove: (
      state,{ payload }: Partial<PayloadAction<DocumentDetailsInterface>>
    ) => {
      const findItem = state.findindex((item) => payload!.code === item.code);

      if (findItem !== 1) {
        state.splice(findItem,1);
      }
    },extraReducers: {},});

和产品商店：

const initialState: ItemInterface[] = [
  {
    _id: "sdfsd",itemType: "Physical Item",itemunitOfMeasure: "Unit",itemCode: "PPC10",itemDescription: "PPC Cement",itemCostPrice: 50,itemSellingPrice: 80,itemQuantity: 100,vatStatus: "Standard rate 15%",{
    _id: "qew",itemCode: "2",itemDescription: "Sepako Cement",itemCostPrice: 30,itemSellingPrice: 60,{
    _id: "sdfsd",itemCode: "1",];

const itemSlice = createSlice({
  name: "item reducer",reducers: {},});

解决方法

看起来你的渲染方法有错误的逻辑。当 documentItems 中没有项目时，您显示“添加”按钮，并且如果其中的任何项目不等于 itemCode，则继续添加“添加”按钮。所以基本上你有2个循环。第一个是渲染项目，第二个是为每个项目渲染按钮。但是您可以使用一个循环来呈现项目，并有逻辑来检查该项目是否已经在 documentItems 数组中 - 如果没有，则显示“添加”按钮，否则显示“删除”按钮。

return (
      <div className={styles.container}>
        <ul>
          {items!.map(item => {
            return (
              <div className={styles.itemContainer} key={item.itemCode}>
                <div key={item.itemCode}>
                  <li>{item.itemCode}</li>
                  <li>{item.itemDescription}</li>
                  {documentItems!.findIndex(
                    documentItem => documentItem.itemCode === item.itemCode,) === -1 ? (
                    <AddButton
                      title={'ADD'}
                      onClick={() =>
                        onAddItem(
                          item.itemCode,item.itemDescription,item.itemSellingPrice,)
                      }
                    />
                  ) : (
                    <RedButton title={"Remove"} />
                  )}
                </div>

                <div>
                  <li>Hello world</li>
                </div>
              </div>
            );
          })}
        </ul>
      </div>
    );

,

我认为您需要提供一个唯一的按钮键。改变状态时写语句

<AddButton
  title={"ADD"}
  key={item.itemCode}
  onClick={() =>
    onAddItem(
      item.itemCode,item.itemSellingPrice
    )
  }
/>

,

您使用 map 函数检查 documentItems 中是否存在项目。我认为将其更改为 some 函数会奏效。

documentItems!.some((documentItem) => {
    return documentItem.itemCode === item.itemCode
    }
) ? (<RedButton title={"Remove"} />): (
    <AddButton
        title={"ADD"}
        onClick={() =>
        onAddItem(
            item.itemCode,item.itemSellingPrice
        )
        }
    />
);