Javascript 用于多个元素的多反应引导弹出

我正在调用一个API端点，该端点将返回一个包含react js的元素数组，如下所示：

const [Versions, setVersions] = useState([]);
useEffect(() => {
    axios.get(`myURL`)
        .then(response => {
            setVersions(response.data);
        })
        .catch((error) => {
            console.log(error);
        })
}, []);

之后，我将使用一个组件来渲染

版本

数组中的每个

元素

，每个元素都有一个

反应引导

覆盖按钮，如下所示：

{Versions.map(element =>
    <Row>
        <OverlayTrigger trigger="click" placement="bottom" overlay={popover} target={element.content.name} >
            <Button onClick={() => setIdVersion(element._id)}>Sélectionner</Button>
        </OverlayTrigger>
     </Row>                                        
  )}

当我触发覆盖时，它工作得很好，但问题是当我打开它并触发另一个覆盖时，popover内容会变为第二个被触发的内容，这适用于所有打开的popover，这意味着我不能触发多个覆盖，每个popover都会显示自己的数据，我相信我必须给每个人一个覆盖的

目标

，以及popover的

数据目标

，我已经尝试过多次，但都没有成功

还有别的办法吗

---

提前谢谢

你能创建一个复制问题的模型吗？这样我们就更容易帮助你了。你没有所有的ajax调用。您可以将

Versions

设置为硬编码数组。是否解决了此问题？您的“popover”组件似乎没有接收到任何属性，这些属性会使其显示不同项目的不同内容。我怀疑您的“setIdVersion”函数更改了一些全局状态，然后在所有“popover”中使用这些状态来读取相同的数据位。但正如其他人提到的，最好能有一个完整的例子。你能创建一个复制这个问题的模型吗？这样我们就更容易帮助你了。你没有所有的ajax调用。您可以将

Versions

设置为硬编码数组。是否解决了此问题？您的“popover”组件似乎没有接收到任何属性，这些属性会使其显示不同项目的不同内容。我怀疑您的“setIdVersion”函数更改了一些全局状态，然后在所有“popover”中使用这些状态来读取相同的数据位。但正如其他人提到的，最好能有一个完整的例子。

const popover = (
    <Popover>
        <Popover.Content>
            {/* SOME OF MY CODE GOES HERE // I LOOP ON ANOTHER ARRAY TO DISPLAY CERTAIN ELEMENTS */}
        </Popover.Content>
    </Popover>
);