如何比较 javascript 中两个不同数组的对象

Question

我有一个 React 应用程序，其中有以下对象列表。

const orderItems = [
  {
    id: 1,
    name: "item 1",
    price: "100",
    availableQty: 2,
    out: ""
  },
  {
    id: 2,
    name: "item 2",
    price: "100",
    availableQty: 2,
    out: ""
  },
  {
    id: 3,
    name: "item 3",
    price: "100",
    availableQty: 2,
    out: ""
  },
  {
    id: 4,
    name: "item 4",
    price: "100",
    availableQty: 2,
    out: ""
  }
];

我正在通过 orderItems 列表进行映射并显示带有 checkbox 的名称。 I have a state named selectedItem and when the checkbox is checked, new object adds to the selectedItem along with the id of the orderItems as shown in the following code.

const handleSelect = (e, item) => {
    const { checked } = e.target;

    const newObj = {
      id: item.id,
      isAdded: true,
      reason: "",
      issue: "",
      availableStock: ""
    };

    if (checked) {
      setselectedItem((previousState) => [...previousState, newObj]);
    }
    if (checked === false) {
      const filteredItems = selectedItem.filter(
        (singleItem) => singleItem.id !== item.id
      );

      setselectedItem(filteredItems);
    }
  };

在 React 应用程序中，我映射 orderItems 并显示带有复选框的 name。选中复选框后，我使用 orderItems 的 id 添加一个新对象到 selectedItem，如果 selectedItem 为空，我将显示为“列表为空” .如果复选框是 selected，我会在 name 下显示一个 input 标签，如果它不是 selected，我会显示一个 label 和文本“not selected"，如下面的代码所示。

<div className="app">
      {items.map((item) => (
        <div className="issue">
          <input type="checkbox" onChange={(e) => handleSelect(e, item)} />
          <label>{item.name}</label>
          {selectedItem.length > 0 ? (
            <>
              {selectedItem.map((singleItem) =>
                singleItem.id === item.id ? (
                  <input type="number" />
                ) : (
                  <label>not selected</label>
                )
              )}
            </>
          ) : (
            "list is empty"
          )}
        </div>
      ))}
    </div>

这里的问题是，当一个项目是 checked 时，它在 selected 项目下显示 input 标签，而在其他项目下显示“not selected”标签项目，但如果我 select 两个复选框，都不会 selected 标签和输入标签显示。如果我 select 3 个复选框，则不会 selected 标签显示两次输入标签。

我想要的是在 selected 项目下只显示 input 标签，在未选中项目下显示 not selected 标签。

codesandbox link: https://codesandbox.io/s/minsaf-2jjt2g

Answer 1

您正在为 item 数组中的每个元素映射 selectedItem 数组。这意味着对于数组中的任何元素，某些条件匹配并且输入和标签都被呈现。

如果我理解代码和您的预期行为，我认为您应该根据 selectedItem 数组是否包含与 id 匹配的元素来有条件地呈现单个输入或标签。

示例：

<div className="app">
  {items.map((item) => (
    <div className="issue">
      <input type="checkbox" onChange={(e) => handleSelect(e, item)} />
      <label>{item.name}</label>
      {selectedItem.length ? (
        selectedItem.some((singleItem) => singleItem.id === item.id) ? (
          <input type="number" />
        ) : (
          <label>not selected</label>
        )
      ) : (
        "list is empty"
      )}
    </div>
  ))}
</div>

如何比较 javascript 中两个不同数组的对象

How to compare objects of two different arrays in javascript

javascript

arrays

jsx

reactjs

react-hooks