ReactJS中的动态Popover

我对React还相当陌生，我正在使用Ant设计框架（）

我有一个表项列表，我希望每个表项上都有一个按钮，这样当按下该表项列表时，有关该行的其他信息就可用了（这是特定于该行的辅助API调用）

我正在尝试使用popover，但我注意到popover在呈现文本之前需要文本，这是一个问题，因为直到第二次API调用我才知道这些信息。到目前为止，我想到的最好的办法是按下按钮触发api调用，然后更新状态，但这会创建一种时髦的体验（因为它是在打开popover之后更新的，从前面的行信息开始）。这不是一个巨大的时间，但它仍然不是一个理想的体验

这就是我到目前为止所做的：

<Popover content={this.contentSec([record['section']])} title= 
   {record['section']} trigger="click">
   <Button onClick={() => this.sectionAttributes(record['section'])}>
      <Icon type="info-circle-o" />
   </Button>
</Popover>

this.sectionAttributes（记录['section]]）}>

this.sectionAttributes触发我的提取请求。并且this.contentSec对现有弹出窗口进行格式化（见下文）

contentSec（道具）{
const listItems=this.state.attributes.map（（项）=>
{item}
);
返回
{listItems}
}

有没有更好的方法来处理这个问题，这样在点击popover按钮时就不会出现错误的延迟

---

谢谢。

由于内容是在第二次api调用后填充的，您可以发送两个道具

内容

，它们可以是空字符串或任何默认值，并

单击将
变量加载为
true
。API调用后获得数据后，您可以发送更新的道具，即带有实际文本的
内容
，并将
加载
设置为false，最后在popover组件中处理逻辑和状态更新

您可以使用
加载
属性从最初的加载程序切换到实际内容。
编写一个条件，检查此.sectionAttributes（记录['section']是否为真，如果为真，则

<Popover content={this.contentSec([record['section']])} title= 
   {record['section']} trigger="click">
   <Button onClick={() => this.sectionAttributes(record['section'])}>
      <Icon type="info-circle-o" />
   </Button>
</Popover>


this.sectionAttributes（记录['section]]）}>

否则就干脆用

<Button onClick={() => this.sectionAttributes(record['section'])}>
      <Icon type="info-circle-o" />
</Button>

this.sectionAttributes（记录['section]]）>

用户第一次单击按钮时，组件重新加载并更新状态，因此当它重新加载时，您可以看到popover满足条件

<Button onClick={() => this.sectionAttributes(record['section'])}>
      <Icon type="info-circle-o" />
</Button>