反应：无法根据目标正确更新数组

Question

如果有人可以帮助我，我将不胜感激。目标：如果通过单击“+”添加的项目：它需要检查订单是否已经存在（如果存在，则增加数量）如果没有，则将该项目附加到订单列表中fullmenu包含以下架构中所有项目的列表：{  _id: 5eef61450bd95e1f5c8f372f ,  name: "Burger"   ,  category: "American"  ,  price: "100"  ,  isVeg: false,  qty: 0}ISSUE：即使它已经存在于订单数组中，它也会添加一个新的 item 对象，而不是仅仅增加它的数量主要代码逻辑：    const [total, setTotal] = useState(0);    const [orders, setOrders] = useState([]);    const [fullMenu, setFullMenu] = useState();    const addMore = (e) => {        let sign = e.target.innerText;        let id = e.target.id;        const newOrders = [...orders];        let order = newOrders.find(each => each.id === id);        // if the order already exists for the item        if (order) {            let _sign = sign === "+" ? 1 : -1;            // increase or decrease the quantity            order.qty = (order.qty || 0) + 1 * _sign;            // remove item from order list if qty = 0            if(!order.qty){                setOrders(orders => orders.filter(each => each.id !== id));                // setTotal(total => total - parseInt(order.price));                return;            };            // save             setOrders(newOrders);            if (sign === "+") setTotal(total => total + parseInt(order.price));            if (sign === "-") setTotal(total => total - parseInt(order.price));            return;        };        // if item doesn't exist in the order list        const item = fullMenu.find(each => each._id === id);        if (sign === "+") {            order = {                ...item, qty: 1              };            setOrders(orders => [...orders, order]);            setTotal(total => total + parseInt(order.price));        };    }JSX：<div className="col-sm-4"><span id={each._id} onClick={addMore} category={each.category}>-</span></div><div className="col-sm-4"><FormCheckLabel className="qty" >{each.qty}</FormCheckLabel></div><div className="col-sm-4"><span id={each._id} onClick={addMore} category={each.category}>+</span></div>

Answer 1

您需要使用each._idnot查找订单each.id

...

let order = newOrders.find(each => each._id === id);

...

编辑： 注意到的另一件事是你直接改变了状态

重构代码

const addMore = (e) => {

  let sign = e.target.innerText;

  let id = e.target.id;

  const newOrders = [...orders];

  let orderIndex = newOrders.findIndex((each) => each._id === id); //<---use correct ._id

  if (orderIndex !== -1) {

    let _sign = sign === "+" ? 1 : -1;

    // order.qty = (order.qty || 0) + 1 * _sign; //<----don't mutate like this

    const updatedOrder = {...newOrders[orderIndex]};

    updatedOrder.qty = (updatedOrder.qty || 0) + 1 * _sign;; //<---update state like this

    if (!updatedOrder.qty) {

      setOrders((orders) => orders.filter((each) => each._id !== id)); //<---use correct ._id

      return;

    }

    // save

    newOrders[orderIndex] = updatedOrder;//<----save updated order like this

    setOrders(newOrders);

    if (sign === "+") setTotal((total) => total + parseInt(order.price));

    if (sign === "-") setTotal((total) => total - parseInt(order.price));

    return;

  }

  const item = fullMenu.find((each) => each._id === id);

  if (sign === "+") {

    order = {

      ...item,

      qty: 1,

    };

    setOrders((orders) => [...orders, order]);

    setTotal((total) => total + parseInt(order.price));

  }

};

Answer 2

let order = newOrders.find(each => each.id === id);应该each._id

你忘了else：

const [total, setTotal] = useState(0);

    const [orders, setOrders] = useState([]);

    const [fullMenu, setFullMenu] = useState();

    const addMore = (e) => {

        let sign = e.target.innerText;

        let id = e.target.id;

        const newOrders = [...orders];

        let order = newOrders.find(each => each.id === id);

        // if the order already exists for the item

        if (order) {

            let _sign = sign === "+" ? 1 : -1;

            // increase or decrease the quantity

            order.qty = (order.qty || 0) + 1 * _sign;

            // remove item from order list if qty = 0

            if(!order.qty){

                setOrders(orders => orders.filter(each => each.id !== id));

                // setTotal(total => total - parseInt(order.price));

                return;

            };

            // save 

            setOrders(newOrders);

            if (sign === "+") setTotal(total => total + parseInt(order.price));

            if (sign === "-") setTotal(total => total - parseInt(order.price));

            return;

        }else{

          // Should be in else block like this

          // if item doesn't exist in the order list

          const item = fullMenu.find(each => each._id === id);

          if (sign === "+") {

            order = {

                ...item, qty: 1 

             };

            setOrders(orders => [...orders, order]);

            setTotal(total => total + parseInt(order.price));

          };

        }

    }

Answer 3

这终于奏效了。进行了小调整：

const [total, setTotal] = useState(0);

    const [orders, setOrders] = useState([]);

    const [fullMenu, setFullMenu] = useState();

    const addMore = (e) => {

        let sign = e.target.innerText;

        let id = e.target.id;

        const newOrders = [...orders];

        let orderIndex = newOrders.findIndex(each => each._id === id);

        // if the order already exists for the item

        if (orderIndex !== -1) {

            let _sign = sign === "+" ? 1 : -1;

            // increase or decrease the quantity

            const updatedOrder = {...newOrders[orderIndex]};

            updatedOrder.qty = (updatedOrder.qty || 0) + 1 * _sign;

            // remove item from order list if qty = 0

            if(!updatedOrder.qty){

                setOrders(orders => orders.filter(each => each._id !== id));

                setTotal(total => total - parseInt(updatedOrder.price));

                return;

            };

            // save 

            newOrders[orderIndex] = updatedOrder;

            setOrders(newOrders);

            if (sign === "+") setTotal(total => total + parseInt(updatedOrder.price));

            if (sign === "-") setTotal(total => total - parseInt(updatedOrder.price));

            return;

        };

        // if item doesn't exist in the order list

        const item = fullMenu.find(each => each._id === id);

        if (sign === "+") {

            let order = {

                ...item, qty: 1 

             };

            setOrders(orders => [...orders, order]);

            setTotal(total => total + parseInt(order.price));

        };

    }