Question

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

我有一个对象'this.state.webs'数组，在页面的多个div中均显示。每个对象都有一个onclick方法，该对象将对象发送给函数，然后我进行API调用，并返回一组要添加到对象“属性”中的对象的“子站点”。

我的状态：

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

您可以使用webs之前的所有内容，使用更新的n的{{1}}的克隆以及n之后的所有内容来更新subs数组：

Answer 2

根据Tholle和Filip W的回答，我想出了自己的方法。

如果不推荐这种方法，很高兴收到一些评论，但是我发现比Tholle的建议更容易理解。

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

Answer 3

根据我呈现数据数组的经验，还发送目标对象的索引（或发生点击的div）很有用。因此，这样的事情可能会有用：

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

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

3 个答案: