时间戳

首页 > 解决方案 > 条件检查后未显示 Jsx 组件

javascript - 条件检查后未显示 Jsx 组件

问题描述

问题是我有两个 redux 商店

  1. items(Items Store
  2. quotationItems(Quote Items.

当一个产品项目被添加到quotationItems我会显示<RedButton title="Remove" />或当它quotationItems为空时，<AddButton title="Add" />应该显示。

usingif语句往往会重新渲染组件并添加新组件，例如：在报价项目中添加新产品后<AddButton />，FlatList 组件中会有一个新的。

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

const ItemFlatList2: FC<Partial<IProps>> = ({
  items,
  documentItems,
  onAddItem,
}) => {
  const TestView = (itemCode) => {
    documentItems.map((x) => {});
  };
  return (
    <FlatList
      data={items}
      keyExtractor={(item) => item.itemCode.toString()}
      renderItem={({
        item: { itemCode, itemDescription, itemSellingPrice },
      }) => {
        return (
          <div className={styles.itemContainer}>
            <h4>Item Code: {itemCode}</h4>
            <h4>Description: {itemDescription}</h4>
            <div>
              {documentItems.map((x) => {
                x.itemCode === itemCode ? (
                  <RedButton title={"Remove"} key={itemCode} />
                ) : (
                  <AddButton title={"Add"} key={itemCode} />
                );
              })}
            </div>
          </div>
        );
      }}
    />
  );
};

我尝试过的其他选项：

我也试过这个，还是不行，按钮会出现，但是在点击第一个按钮后，这将成功添加product item到quotation item商店但是当我尝试点击`<AddButton title的第二个或第三个按钮时={'Add'} key={itemCode} /> 我没有得到任何回应。

            <div>
              {documentItems.length <= 0 ? (
                <AddButton
                  title={"Add"}
                  key={itemCode}
                  onClick={() => onAddItem(itemCode)}
                />
              ) : (
                documentItems!.map((x) =>
                  x.itemCode === itemCode ? (
                    <RedButton title={"Remove"} key={itemCode} />
                  ) : (
                    <
AddButton title={"Add"} key={itemCode} onClick={() => onAddItem(itemCode)} />
                  )
                )
              )}
            </div>

这是上面修改代码的结果： 修改代码的结果

标签： javascriptreactjstypescript

解决方案

请添加 return 关键字。

documentItems.map((x) => {
return (x.itemCode === itemCode ? (
<RedButton title={"Remove"} key={itemCode} />
) : (
<AddButton title={"Add"} key={itemCode} />
);
)})

或者只是删除花括号。

documentItems.map((x) => (x.itemCode === itemCode ? (
<RedButton title={"Remove"} key={itemCode} />
) : (
<AddButton title={"Add"} key={itemCode} />
)))

基于您在问题中所做的更新。这是“documentItems”中数据的问题。因为每个项目代码只需要 1 个按钮。而不是地图使用查找。它将返回 1 项并修复此重复项。

推荐阅读