Обновление значения в массиве в массиве в состоянии - PullRequest
Новая
       4

Обновление значения в массиве в массиве в состоянии

0 голосов
/ 26 марта 2020

Я пытаюсь обновить состояние значения id в shoeList. В настоящее время у меня есть текстовое поле, которое позволяет вводить новый идентификатор, и я хочу, чтобы состояние обновлялось при нажатии кнопки OK.

Вот некоторые соответствующие коды: 

state = {
    editingToggle: false,
    shoeList : [
      {name: 'bob', id: '123213-0', shoeSize: 'L'}
     ],
}

<TextInput className='text-area-header' id="textM" width="m" type="text" placeholder={this.state.shoeList[0].id}  />
<Button className="ok-button" variant="tertiary" size ='xs' type="button" handleClick={this.saveHeader}>OK</Button>

 saveHeader(e) {
    this.setState(state=> ({
     shoeList[0].name: 
    }))
    alert('Header changed to ' + this.state.shoeList[0].id);
    e.preventDefault();
  }

Я не уверен, что положить в this.setState, так как я не нашел ничего о том, как обновить вложенные значения с помощью поиска Google. Кроме того, всякий раз, когда я помещаю атрибут значения в теги TextInput, он больше не позволяет мне редактировать текстовый ввод на веб-странице. Любая помощь будет великолепна

1 Ответ

0 голосов
/ 26 марта 2020

Рассмотрим этот пример: 

saveHeader() {
    this.state.shoeList[0].id = 'newid'
    this.setState({ shoeList: this.state.shoeList })
}

setState () проверяет, изменились ли значения, и если нет, то не обновляет компонент. Изменение вложенного значения не приводит к изменению ссылки на массив, что означает, что простого вызова setState () недостаточно.

Существует два пути решения этой проблемы. Во-первых, необходимо использовать forceUpdate (): 

saveHeader() {
    this.state.shoeList[0].id = 'newid'
    this.forceUpdate()
}

. Это заставляет компонент повторно выполнить рендеринг, даже если состояние не изменилось.

Второй способ - это фактически изменить Массив shoeList путем создания нового: 

saveHeader() {
    let newShoeList = this.state.shoeList.slice()
    newShoeList[0].id = 'newid'
    this.setState({ shoeList: newShoeList })
}

Использование .slice () в массиве создает новый массив, который полностью идентичен. Но поскольку это новый массив, React заметит, что состояние изменилось, и повторно отобразит компонент.

...