javascript - 更新状态数组中的特定对象

Question

我正在尝试更新数组中处于我的状态的对象。

我有一个对象数组“this.state.webs”，它显示在页面上的多个 div 中。每个都有一个 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

您可以使用 n 之前的所有内容更新您的 webs 数组，它是 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)
    ]
  })
}