时间戳

首页 > 解决方案 > 过滤器未返回新数组

javascript - 过滤器未返回新数组

问题描述

我正在使用 React 并使用过滤器数组将返回数组的值与原始数组进行比较。但是，不返回过滤后的数组。这是我的代码：

const removeFromCart = id => {
const filteredCart = cart.filter(product => product.id !== id)
setCart(filteredCart)

如果我在 setCart 设置的购物车变量上使用 console.log，则会显示新的过滤数组。如果我在filteredCart 上使用console.log，则会显示一个空数组。过滤后的数组还显示 !== 是否更改为 ==。

当通过 id 搜索产品以更新属性时，将返回一个空数组。这是代码：

const addToCart = (id, name, price) => {
let inCart = cart.filter(product => product.id === id)
...
}

我知道过滤器函数返回通过测试的元素，因此对于第二个代码块，应该返回具有相同 id 值的对象而不是空数组。

标签： javascriptarraysreactjsfilter

解决方案

  1. 如果对象中的 id 是整数，则需要将传递给函数的字符串 id 强制转换为整数。

  2. 如果要在状态更新后记录状态，则需要使用并作为依赖项useEffect传入，因为排队状态函数是异步处理的。cart

const { useEffect, useState } = React;

function Example({ data }) {

  const [ cart, setCart ] = useState(data);

  function removeFromCart(e) {
    const { id } = e.target.dataset;
    const filteredCart = cart.filter(product => product.id !== +id);
    console.log(filteredCart)
    setCart(filteredCart);
  }

  useEffect(() => {
    console.log(JSON.stringify(cart));
  }, [cart]);

  return (
    <div>
      {cart.map(obj => {
        return (
          <div>
            <div>{obj.name}
              &nbsp;&nbsp;
              <span
                className="remove"
                data-id={obj.id}
                onClick={removeFromCart}
              >[Remove]
              </span>
            </div>
          </div>
        );
      })}
    </div>
  );
};

const data = [
  { id: 1, name: 'Cheese' },
  { id: 2, name: 'Bread' },
  { id: 3, name: 'Jam' }
];

ReactDOM.render(
  <Example data={data} />,
  document.getElementById("react")
);
.remove { cursor: pointer; }
.remove:hover { font-weight: bold; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.1/umd/react-dom.production.min.js"></script>
<div id="react"></div>

推荐阅读