useState меняется даже без установки значения - PullRequest
Новая
       5

useState меняется даже без установки значения

0 голосов
/ 30 мая 2019

Я полностью запутался в этом сценарии, у меня есть переменная состояния с именем listItems , устанавливающая значение для listItems с использованием вызова API внутри useEffect , теперь в handleChange Я изменяю значение конкретного объекта внутри listItems , но я не изменил фактическое значение listItems , но если я утешу listItems отображается как обновленное значение даже без setList, как это происходит? 

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

1 Ответ

3 голосов
/ 30 мая 2019

Следующий код var arrList=item; является присваиванием по ссылке, это означает, что arrList и item являются ссылками на один и тот же объект, что объясняет изменение второго при изменении первого, если вы хотите клонироватьобъект, который вы можете использовать Object.assign() или Spread operator или другое решение: 

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

Рабочая демонстрация:

Edit wispy-dawn-xogze

...