如何在 React 中檢查 object 數組是否存在於 state 中？

Question

我正在使用 React JS 構建動態表單。 在我的一個表單中，我創建了一個 10 的輸入表單。為了獲得干凈的代碼，我通過它為表單創建了一個 object 和 map。 代碼如下。

{homeAmeneties.map((home) => {
    <div className="h-8 flex justify-end  rounded-md pr-10">
                    <input
                      type="number"
                      onInput={(event) =>
                        (event.target.value = event.target.value.slice(
                          0,
                          event.target.maxLength
                        ))
                      }
                      maxLength="3"
                      onChange={(e) => updateVal(e, home.name)}
                      className="border-[1px] w-1/2  border-black rounded-md h-full focus:outline-none px-2"
                    />
                  </div>
})}

然后我創建了一個useState([])並使用條件檢查該字段是否存在，以便我只能更新該值。

const [amen, setAmen] = useState([]);
const updateVal = (e, type) => {
amen.some((item) => {
        if (item.name === type) {
          setAmen({ name: type, val: e.target.value });
        } else {
          setAmen({ name: type, val: e.target.value });
        }
      });
}

當我運行它時它會拋出一個錯誤。 amen.some is not a function錯誤。 我想要實現的是，最初 state 是空的。 但是當一個字段值更改時，它會將其作為{ name: type, val: e.target.value }添加到數組中。 所以在添加之前我們檢查類型是否已經存在。 如果是這樣，那么我們更改 object 的確切數組的值。但如果類型不存在，它會創建一個新的 object。我該怎么做？

Answer 1

看起來錯誤被拋出是因為 amen 是一個數組，但你試圖在它上面使用 .some() 方法，這是 Array 原型的一個方法，但它不是 function。.some() 返回boolean 而不是數組，因此您不能將其他數組方法鏈接到它。

要實現您想要的效果，您可以改用 .findIndex() 方法。 此方法返回數組中滿足提供的測試 function 的第一個元素的索引，如果未找到，則返回 -1。

以下是如何使用 .findIndex() 方法更新 state 的示例：

      const updateVal = (e, type) => {
      const index = amen.findIndex((item) => item.name === type);
    
      if (index !== -1) {
        const newAmen = [...amen];
        newAmen[index] = { name: type, val: e.target.value };
        setAmen(newAmen);
      } else {
        setAmen([...amen, { name: type, val: e.target.value }]);
      }
    };

這段代碼首先在amen數組中找到object的索引，該索引的name屬性與傳入的類型匹配。如果索引不為-1，則表示object已經存在於數組中，因此創建一個新數組(newAmen) 即當前state數組的副本，更新索引處object的值，並將新數組設置為新的state。如果索引為-1，則表示object不存在數組，因此它會創建一個新數組，其中包含新的 object，並將其設置為新的 state。

此外，在您的代碼中，您試圖將 state 設置為 object，而這不是 state 的工作方式。 在您的情況下，您嘗試將 state 設置為 object，但它需要一個數組，這就是它拋出錯誤的原因。

你應該使用setAmen(prevAmen => [...prevAmen, { name: type, val: e.target.value }]);

      const updateVal = (e, type) => {
      const index = amen.findIndex((item) => item.name === type);

      if (index !== -1) {
        setAmen((prevAmen) => {
          prevAmen[index] = { name: type, val: e.target.value };
          return [...prevAmen];
        });

      } else {
        setAmen((prevAmen) => [...prevAmen, { name: type, val: e.target.value }]);

      }
    };

這樣它應該按預期工作。

Answer 2

我有3點要指出：

• 你說你通過它創建了一個 object 和map來呈現輸入字段。 實際上，你只能在JavaScript中map超過arrays 。
• 在您的updateVal方法調用中，您將react state設置為object而不是array 。
• 我不建議使用Array.some ()來更新 state。相反，我會使用Array.findIndex () 。

解決方案

const updateVal = (e, type) => {
  const updatedAmen = [ ...amen ]; // create a new array to avoid mutating the state directly

  // check if an input already exists with the said type & get the index position
  const exisitingAmenIdx = updatedAmen.findIndex((a) => a.name === type);

  if (exisitingAmenIdx >= 0) {
    updatedAmen[exisitingAmenIdx].val = e.target.value;
  } else {
    updatedAmen.push({
      name: type,
      val: e.target.value
    })

    // finally update the state
    setAmen(updatedAmen)
  }
};

Answer 3

這是因為您將amen的 state 值設置為 object，您的目標是 append 到數組：

  setAmen({ name: type, val: e.target.value });

  // amen = { name: type, val: e.target.value }

由於它從 Array 變為Array ，因此不會定義Array.some() 。 您可以撥打 go 的一種方法是：

  setAmen([{ name: type, val: e.target.value }, ...amen]);

創建一個新數組，因此 React 將更新 state。添加新元素，然后使用擴展運算符...amen提取其他元素。