javascript - 反应 - 功能未执行

Question

我不知道为什么这不起作用。当我运行时removeFromCart，它可以工作，但在updateCount. 请帮我解决这个问题。

    updateCount = (id,increment) => {
        const cartItems = this.state.cart;
        if((this.findItem(cartItems, id).count == 1 && increment < 0))
            this.removeFromCart(id);
        else{
            this.findItem(cartItems, id).count += increment;
        }

        this.setState({
            cart: cartItems
        });
    }

    removeFromCart = id=>{
        const cartItems = this.state.cart.filter(el=> el.id !== id);
        this.setState({
            cart: cartItems
        });
    }

    findItem = (arr,id)=> {
        return arr.find(e=> e.id === id);
    }

你可以在Github上找到完整的源代码

标签： javascriptreactjs

Answer 1

花了一些时间仔细研究您的代码，显然没有多少错误（除了状态突变），最终我只是将您的 repo 克隆到一个代码沙箱中并进行了调试。

问题

问题是状态更新来自updateCount和另一个来自removeFromCart. 条件this.findItem(cartItems, id).count == 1 && increment < 0为真并被this.removeFromCart调用，找到购物车项目并将状态更新入队。执行返回updateCount并且第二个状态更新被排入队列。cartItems第二次更新用函数范围内的（状态）覆盖第一次。

updateCount = (id, increment) => {
  const cartItems = this.state.cart;
  if (this.findItem(cartItems, id).count == 1 && increment < 0)
    this.removeFromCart(id);
  else {
    this.findItem(cartItems, id).count += increment;
  }
  this.setState({
    cart: cartItems // <-- State update #2
  });
};

removeFromCart = (id) => {
  const cartItems = this.state.cart.filter((el) => el.id !== id);
  this.setState({
    cart: cartItems // <-- State update #1
  });
};

解决方案

从购物车中删除商品时，仅将单个状态更新排入队列。将第二个更新塞入正在更新它的逻辑分支中。

updateCount = (id, increment) => {
  const cartItems = this.state.cart;
  if (this.findItem(cartItems, id).count == 1 && increment < 0)
    this.removeFromCart(id);
  else {
    this.findItem(cartItems, id).count += increment;
    this.setState({
      cart: cartItems
    });
  }
};

此时您的代码似乎可以正常运行，但我应该注意，这this.findItem(cartItems, id).count += increment;在技术上是一种状态突变。后面的一行您至少复制到一个新的状态对象中，这一事实掩盖了这一点。您应该始终避免状态突变。我建议在更新项目计数时进行以下编辑以映射到新的购物车数组。除非您有充分的理由，否则也可以使用===而不是进行相等比较。==

updateCount = (id, increment) => {
  const cartItems = this.state.cart;
  if (this.findItem(cartItems, id).count === 1 && increment < 0)
    this.removeFromCart(id);
  else {
    this.setState({
      cart: cartItems.map((item) =>
        item.id === id
          ? {
              ...item,
              count: item.count + increment
            }
          : item
      )
    });
  }
};