Javascript 在React中选择产品后如何显示结果

我有一个以表格形式显示的产品列表，我希望在单击产品行时在模式上显示有关某个产品的更多信息（调用另一个api）。该模式现在正在工作，并且在单击行时显示该模式，但我不确定如何实现对另一个api/端点进行另一次调用的逻辑，以及在单击时显示有关正确产品的信息。我应该在哪里进行另一个api调用？我是否应该为构造函数中的另一个api设置另一个状态，然后获取ComponentDidMount（）

//Modal.js
从“React”导入React；
从“反应引导/表格”导入表格；
导出默认函数Modal（）{
返回(
自有产品
竞争对手产品
接近
); 
}
//ProductTable.js
导出默认类TableView扩展组件{
建造师（道具）{
超级（道具）；
此.state={
产品：[]，
错误：null，
isLoaded:false，
莫达洛彭：错，
所选产品：{}
};
}
toggleModal=产品=>{
this.setState（{selectedProduct:product}）；
this.setState（prevState=>({
modalOpen:！prevState.modalOpen
}));
};
获取产品（）{
axios
.得到(
“一些api”
)
。然后（res=>{
控制台日志（res）；
这是我的国家({
isLoaded：是的，
产品:res.data
});
})
.catch（错误=>{
console.log（错误）；
});
}
componentDidMount（）{
这是fetchProducts（）；
}
render（）{
设{isLoaded，products}=this.state；
如果（！已加载）{
返回；
}否则{
返回(
{this.props.rows}
产品ID
匹配ID
匹配名称
烙印
比赛分数
匹配价格
匹配状态
{产品&&
products.map（product=>(
//改为使用过滤器仅显示匹配的
this.toggleModal（产品）}
>
{product.id}
{product.matches[0].id}
{product.matches[0].name}
{product.matches[0]。specifications.brand}
{Math.round（product.matches[0].score）}
{product.matches[0]。price}
{product.matches[0].matchLabel}
))}
{this.state.modalOpen(
)：null}
);
}
}
}

这方面可以有多种方法

您可以维护另一个状态变量。并将api调用放入toggleModal，如下所示：

在您的状态中定义另一个状态变量，如productInfo

this.state = {
    products: [],
    error: null,
    isLoaded: false,
    modalOpen: false,
    selectedProduct: {},
    productInfo: null
};

然后在toggleModal中，每当toggleModal设置状态时，您需要检查modalOpen是否为true，然后进行apiCall。我假设apiCall是这里返回产品信息的端点

toggleModal = product => {
this.setState({ selectedProduct: product });
this.setState(prevState => ({modalOpen: !prevState.modalOpen}), () => {
    if (this.state.modalOpen) {
        //Make an api call
        fetch(apiCall).then(res => {
            this.setState({productInfo: res.data });
        });
    }
 });
};

在模态中传递与道具相同的状态：

<Modal
    product={this.state.selectedProduct}
    closeButton={this.toggleModal}
    productInfo={this.state.productInfo}
    />

或者

将Modal定义为类，定义Modal的状态并使用Modal的生命周期方法，如componentDidMount（），在那里进行api调用并显示详细信息

---

在单击的同一函数中进行另一个api调用，因为在该单击项的帮助下，您正在调用另一个api。正确的？

<Modal
    product={this.state.selectedProduct}
    closeButton={this.toggleModal}
    productInfo={this.state.productInfo}
    />