Как увеличить или уменьшить число во вложенном объекте в state?

Question

[ReactDev]

Всем привет! Я новичок и у меня не получается изменить значение quantity для каждого id в state. Буду рад помощи, заранее спасибо!

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
    countId: [
             {id: 'id-1',  quantity: 1},  
             {id: 'id-2',  quantity: 5}
                ]
 }

IncrementItem = () => {
    this.setState(prevState => {
      if (prevState.countId.quantityId.forEach(i => i? i.quantity < 99999 : null) ) {
        return {
            ...prevState.countId,
            quantityId:{
              ...prevState.countId.quantityId,
              quantity: prevState.countId.quantityId.map(i => i.quantity + 1)
            }
        }
      } else {
        return null;
      }
    });
  }
  DecrementItem = () => {
    this.setState(prevState => {
      if (prevState.countId.quantityId.forEach(i => i.quantity > 1)) {
        return {
         ...prevState.countId,
          quantityId:{
            ...prevState.countId.quantityId,
            quantity: prevState.countId.quantityId.map(i => i.quantity - 1)
          }
      }
      } else {
        return null
      }
    });
  }
render(){
return (
<div>
  <button onClick={this.IncrementItem}>+</button>
  <button  onClick={this.DecrementItem}>-</button>
</div>
)
}

Comments

[0xD34F]

у меня не получается...

И не получится.

Только не с текущим (нулевым) уровнем знаний языка.

Лучше бы вам начать осваивать js. А react... забудьте это слово на ближайший год.

[ReactDev]

0xD34F, напишите, пожалуйста, что у меня не так. Я делаю копирование что бы добраться до quantity что бы его изменить.

[Антон Горецкий]

ReactDev, без обид, но код - дичь. Поясните, к примеру, как должно работать вот это:
<div onChange={this.QuantityChange}>

[ReactDev]

Антон Горецкий, спасибо, что написали. Этот код здесь не нужен <div onChange={this.QuantityChange}>. Я сюда добавил код из разных компонентов, в том числе, что тестировал. Это первый мой вопрос на Хабре еще не освоился. Подскажите, что я делаю не так?

[ReactDev]

Антон Горецкий, главный вопрос, как мне обратится к определенной quntity и изменить (увеличить на 1 или уменьшить). Я прошу прощения за "код дичь"

[Антон Горецкий]

ReactDev, для начала исправьте вот этот ужас
{'id1', quantity: 1}
это не валидная запись объекта, вызывает синтаксическую ошибку, потом поправьте количество закрывающих скобок, у вас конструктор не закрыт. Продумайте названия переменных в сложном объекте стейта - у вас на каждом уровне используется ID - это кого хочешь запутает. И что по вашему делает вот эта конструкция?

prevState.countId.quantityId.forEach(i => i? i.quantity < 99999 : null)

[ReactDev]

Антон Горецкий, прошу прощения за долгий ответ и спасибо что вы меня натолкнули что я делал не так именно с данными, честно говоря, сам не знаю как я не заметил)).

Я сейчас нормально получаю данные, но есть проблема с объединением объектов.

Я создаю объекты таким путем:

CountId = (event) => {
    this.setState({
      countId: {
        ...this.state.countId, countId: {id:(event.currentTarget.id), quantity:1}
      }
    })
  }

event.currentTarget.id так я получаю данные через клик, а именно получаю id товара по которому был сделан клик (с этим у меня проблем нет).

Я пытаюсь объединять через assign, но пишет assign not function

[Антон Горецкий]

ReactDev, не вижу проблем с этим, вот пример

// clone = пустой объект + все свойства user
let clone = Object.assign({}, user);

[ReactDev]

Антон Горецкий, такой код мне выдает объект с правильными данными, но если я добавлю новый объект, то вместо старого новый объект. Мне нужно, что бы добавлялся новый объект с новым в state. Как concat соединяет массивы, так же мне нужно, что бы эти объекты соединились. Данный код просто заменяет один объект на другой =(

CountId = (event) => {
    this.setState({
      countId: {
        ...this.state.countId, countId: Object.assign({},{id:(event.currentTarget.id), quantity:1})
      }
    })
  }

[Антон Горецкий]

ReactDev, срочно учите синтаксис js! Изначально в стейте у вас в countId массив []

this.state = {
    countId: [
             {id: 'id-1',  quantity: 1},  
             {id: 'id-2',  quantity: 5}
                ]
 }

Массив объектов!
А тут вы пытаетесь в него объект положить

this.setState({
      countId: {
        ...this.state.countId, countId: Object.assign({},{id:(event.currentTarget.id), quantity:1})
      }
    })

Для решения вашего вопроса вам нужно сначала создать копию массива объектов (из countId), затем пробежаться по нему и добавить значение в каждый элемент quantity, затем полученный массив присвоить в countId.
Если же говорить про Object.assign - то он клонирует лишь объекты первого уровня вложенности, если клонируемый объект содержит не примитивные значения, то они передадутся по ссылке.

Answer 1

[Kostenitskiy_A]

Попробуй так

const newArrayId = this.state.countId;
newArrayId.map((element) => { element.quantity + 1 });
this.setState({countId: newArrayId});

1 строка - создаёшь новый массив на основе объектов из this.state.countId
2 строка - перебираешь элементы нового массива и увеличиваешь quantity на 1
3 строка - меняешь своё состояние

Comments

[ReactDev]

Благодарю за ваш ответ! Я уже решил и мое решение близко к вашему. Еще раз спасибо!