Обновить конкретный объект в массиве в состоянии

Question

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

У меня есть массив объектов this.state.webs, который представлен в нескольких разделах на странице. У каждого из них есть метод onclick, который отправляет объект в функцию, затем я выполняю вызов API и возвращаю набор «вложенных сетей», которые я хочу добавить к объекту в свойстве «subs».

Мое состояние:

this.state = {
  webs: this.props.webs
}

Мой шаблон:

<Nav
   groups={[
     {
       links: this.state.webs
     }
   ]}
   expandedStateText={'expanded'}
   collapsedStateText={'collapsed'}
   selectedKey={'key3'}
   onLinkClick={this._openWeb.bind(this)}
 />

Функция Onclick:

  private async _openWeb(r, n): Promise<void> {
    const service = new MyService();
    var subs = await service.getSubs(n);

    n.subs = subs;

    ### How do I update 'n' with the subs? setState({ ? })
  }

Итак, когда пользователь щелкает по сети, я выбираю несколько вложенных веб-сайтов, а затем хочу обновить родительский объект n дочерними элементами (подпрограммами).

Answer 1

Из моего опыта с представлением массива данных было также полезно отправить индекс целевого объекта (или div, где произошел щелчок). Так что-то вроде этого может быть полезно:

   const webs = this.state.webs
   webs[index].subs = subs
   this.setState({webs})

Answer 2

Основываясь на ответе Толле и Филиппа В., я придумал свой собственный подход.

Рад получить некоторые комментарии, если такой подход не рекомендуется, но мне легче понять, чем предложение Толле.

const webs = [...this.state.webs];
const index = webs.indexOf(n);
webs[index].links = links;
webs[index].isExpanded = true;
this.setState({webs})

Answer 3

Вы можете обновить массив webs всем до n, клоном n с обновленным subs и всем после n:

private async _openWeb(r, n): Promise<void> {
  const service = new MyService();
  const subs = await service.getSubs(n);

  const { webs } = this.state;
  const nIndex = webs.indexOf(n);

  this.setState({
    webs: [
      ...webs.slice(0, nIndex),
      { ...n, subs },
      ...webs.slice(nIndex + 1)
    ]
  })
}