映射对象而不覆盖 React 中的现有对象

Question

我有这段代码，每次单击按钮时都应按用户输入的值过滤产品。这部分工作正常，但每次我尝试添加另一个产品时，它都会覆盖已经映射的值。但我需要将所有输入的产品保持在 setLoadedProducts 状态。

  const [loadedProducts, setLoadedProducts] = useState([]);
  const [expeditionProducts, setExpeditionProducts] = useState([]);

  const addProduct = () => {
    const enteredProductEan = enteredEanRef.current.value;
    const filteredExpeditionProducts = expeditionProducts.filter(
      (order_item) => {
        return order_item.ean.toString() === enteredProductEan;
      }
    );

      const loadedExpeditionProducts = filteredExpeditionProducts.map(
        (invoiceData) => {
          return invoiceData;
        }
      );
      setLoadedProducts(loadedExpeditionProducts);
      setExpeditionProducts(
        expeditionProducts.filter(function (item) {
          return !filteredExpeditionProducts.includes(item);
        })
      );

Answer 1

如果您想继续向 loadedProducts 添加更多产品而不丢失您已经保存的产品，您可以在更新状态时包含现有 loadedProducts 的值：

const newLoadedExpeditionProducts = filteredExpeditionProducts.map(
  (invoiceData) => {
    return invoiceData;
  }
);

setLoadedProducts(loadedProducts => [...loadedProducts, ...newLoadedExpeditionProducts]);

映射对象而不覆盖 React 中的现有对象

Map objects without overwriting existing one in React

html

javascript

arrays

mapping

reactjs