即使不设置值也可以更改useState

Question

I am totally confused about this scenario , I am having a state variable called listItems setting the value for listItems using the api call inside useEffect now in the handleChange I am changing the particular object value inside the listItems but I didn't change the actual listItems value but if i console the listItems it's showing as updated value even without setList how come it happens?

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

The following code var arrList=item; is an assignment by reference, it means that arrList and item are both references to the same object which explains the modification of the second when modifying the first, if you want to clone an object you can use Object.assign() or the Spread operator or another solution:

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

Working demo: