Как правильно setState написать?

160

15 января 2021, 13:00

Не получается изменить значение инпута. Как правильно это сделать?

Что есть на данный момент.

State:

constructor(props) {
            super(props);
            this.state = {
                objects: {
                    name: '',
                    mass: [
                        {
                            img: '',
                            count: '1', // Это первый инпут
                            countMass: '2' // Это состояние второго инпута
                        },
                        {
                            img: '',
                            count: '1', // Это первый инпут
                            countMass: '2' // Это состояние второго инпута
                        },
                };
            };
            this.handleInputChange = this.handleInputChange.bind(this);
          }

JSX:

{this.mass.map((variant, index) => {
  return (
    <div key={index}>
            <Input name={"count" + index} onChange={this.handleInputChange} value={variant.count} />
            <Input name={"countMass" + index} onChange={this.handleInputChange} value={variant.mass}/>
    </div>
  )
})}

Функция:

handleInputChange(event) {
    let objects = {...this.state.objects}
    const target = event.target;
    const value = target.value;
    const name = target.name;
    this.setState({
        objects: {
            ...objects,
            mass: [
                {[name]: value}
            ]
        }
    });
  }

Answer 1

У вас в name инпута хранится значение ключа + индекс name={"count" + index}, поэтому и в обработчике {[name]: value} это уже совсем другое

И использовать индекс в качестве ключа не очень рекомендуется

mass: [
   {[name]: value}
]

Вот эта строчка делает не то что вы хотите: она перезапишет массив в стейте оставив один элемент

Нужно, сделать как-то так:

{this.mass.map((variant, index) => {
  return (
    <div key={variant.id}>
            <Input name={"count-" + index} data-id={variant.id} onChange={this.handleInputChange} value={variant.count} />
            <Input name={"countMass-" + index} data-id={variant.id} onChange={this.handleInputChange} value={variant.mass}/>
    </div>
  )
})}

Добавить в стейте id для элементов массива

mass: [
  {
    id: "1", // нужно число
    img: '',
    count: '',
    countMass: ''
  },
  // ...
]

И в обработчике уже правильно обновлять стейте

  handleInputChange({target}) {
    const objects = {...this.state.objects}
    const value = target.value;
    const name = target.name.split('-')[0];
    const id = target.getAttribute('data-id');
    // Так безопасней искать объект, нежели по индексу
    const changedIndex = objects.mass.findIndex(el => el.id === id);
    const changedEl = objects.mass[changedIndex];
    changedEl[name] = value;
    this.setState({
      objects: {
        ...objects,
        mass: [
          ...objects.mass.slice(0, changedIndex),
          changedEl,
          ...objects.mass.slice(changedIndex + 1),
        ]
      }
    });
  }