javascript - 即使不设置值， useState 也会发生变化

Question

我对这种情况完全感到困惑，我有一个名为 listItems 的状态变量，使用 useEffect 内部的 api 调用设置 listItems 的值> 现在在 handleChange 中，我正在更改 listItems 内的特定对象值，但我没有更改实际的 listItems 值，但如果我控制台即使没有 setList，listItems 也会显示为更新值，这是怎么发生的？

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import OrderSummary from './orderSummary'

export default function displayItems() {
  const [listItems, setList] = useState([]);
  const [order, setorder] = useState([]);
  var newarr = [];

  useEffect(() => {
    axios.post('http://localhost:3006/listItem', {

    })
      .then(function (resp) {
        let res = resp.data.sendList.response;
        let newRes = res.map((item) => {
          return item;
        })
        setList(newRes);
      })
      .catch(function (error) {
        console.log(error);
      });

  }, [])

  function handleChange(type,item) {
    var arrList=item;
    var newAr=[];
    if (type === 1) {
      arrList.quantity=arrList.quantity+1;
    }
    else if (type === 0 && item.quantity > 1) {
      arrList.quantity=arrList.quantity-1;
    }
    newAr.push(arrList);
    console.log("test",listItems) // value changes here dont know how
    //  setList(listItems);
  }

  function placeOrder(item) {
    newarr.push(...order, item);
    setorder(newarr)
  }

  return (
    <div className="col">
      <div className="row">
        <div classname="col-md-6">
        <p><b>Available Items</b> </p>
          {listItems && listItems.map((item) => {
            return (
              <div key={item._id}>
                <p>Name:{item.name}</p>
                <p>Description:{item.description}</p>
                <p>Cost:{'₹'}{' '}{item.cost}</p>
                <p>Quantity:{' '}
                  <i onClick={() => handleChange(1,item)} className="fa fa-plus-circle" />
                  <span className="text-center"><b>{item.quantity}</b></span><i onClick={() => handleChange(0,item)} className="fa fa-minus-circle" /></p>
                <div>
                  <button onClick={() => placeOrder(item)}>Add to order</button>
                </div>
              </div>)
          })}
        </div>
        {order && <OrderSummary orderItems={order} />}
      </div>
    </div>
  )
}

sandox

Answer 1

下面的代码var arrList=item;是通过引用赋值，这意味着arrList和item都是对同一个的引用对象，它解释了在修改第一个对象时对第二个对象的修改，如果你想克隆一个对象，你可以使用 Object.assign()或Spread operator或其他解决方案:

var arrList = Object.assign({}, item);
// Or
var arrList = {...item};

工作演示: