在 React JS 中渲染后，在 JSON 数组对象上的表数据上显示所选按钮的 div 元素 onclick

问：

我有一个这样的JSON对象：

import React, {useState}from 'react'

export const SitePrefData1 = [
{"groupid":"SFRA Unified Feature Cartridge","description":"Enables the In Store Pickup Plugin","preferenceid":"sfraEnableOverlayInStorePickup"},
{"groupid":"Agrex","description":"Enable Tls Perks JP","preferenceid":"tlsjpEnable"},
{"groupid":"AmazonPay_v2","description":"sample description1","preferenceid":"amzPayEnabled"},
{"groupid":"ApplePayConfigs","description":"sample description2","preferenceid":"isApplePayEnabledOnPDP"},
];

我希望根据传递的索引（如 0,1,2）在单击按钮时显示描述值，但它显示所有按钮描述值，而不管传递的任何索引如何。例如。如果我单击第一个“描述”按钮，我希望它只显示“启用店内取货插件”，而是显示所有描述值

我在JSON对象中使用axios并返回响应，并将其存储在数组中，如下所示：

SiteFunctionality.js

const getSitePFunctionality1 =  () => {
        console.log("Site Pref length"+SitePrefData1.length);
       
            var jsondata = JSON.stringify(SitePrefData1);

            axios.get('http://localhost:3001/sitefunctionality1?sitedata=' + jsondata +
             '&site=' + selectedBrand+'&site_id=' + selectedSite).then(response => {
             setSitePreference(response.data)
            })
    }

在渲染数据时，我使用 div 元素在单个表数据上有一个按钮，如下所示。我遍历json map以显示保存的响应，如下所示：

服务器.js

app.get('/sitefunctionality1', (req,res) => {

    var sitedata = req.query.sitedata;
    var site = req.query.site;
    var siteid  = req.query.site_id;
    var apiCalls = [];
    var eachresult={
        site_values : []
    }
    
    const sitejsonresult = JSON.parse(sitedata);

    for(var i=0; i<sitejsonresult.length; i++ ){
        
         apiCalls.push(getSitePreference(sitejsonresult[i].groupid,sitejsonresult[i].preferenceid,site));  
    }
   
    
    Promise.all(apiCalls).then(response => {
       
        for(var j = 0; j< response.length ; j++){
            
            var eachRes = JSON.parse(response[j]);
            
            if(eachRes.site_values){
                var keys = Object.keys(eachRes.site_values);
                for(var i = 0; i< keys.length; i++){
                    if(siteid===keys[i]){
                    
                    eachresult.site_values.push({
                        groupId : sitejsonresult[j].groupid,
                        description:sitejsonresult[j].description,
                        preferenceId : eachRes.id,
                        id : keys[i],
                        value : eachRes.site_values[keys[i]]
                    })
                } 
            }// end of for keys
        }// end of if
            
        }// end of outer far response
        res.json(eachresult);
    })

我正在使用一个函数getDescription，该函数传递当前键值以传递当前索引值，以便它显示特定传入索引值的json对象值。

 const getDescription = (inputkey,rownum)=> {

        console.log("input key ....  "+inputkey);
        console.log("rownum ....  "+rownum);
        //for (var i=0; i<SitePrefData1.length; i++){
        SitePrefData1.map((data,key)=>{
            console.log("groupid ....  "+data.groupid);
           // console.log("groupid ....  "+SitePrefData1[i].groupid);
            console.log("key ....  "+key);
          
                if(data.groupid===inputkey && key===rownum){

                    console.log("success loop ....  ");
                    setIsShown(true);
                    setDesc(data.description); 
                } 
            })    
         }
        }

` return(
        <>
            <button className='search-button' onClick={() => { getSitePFunctionality1();}} >S</button>
            
            {
            <table className='table-sitecontent'>
                        <thead>
                            <tr>
                                <th style={style1}>Use Case</th>
                                <th style={style3}>Flag Status</th>
                            </tr>
                        </thead>
                        <tbody>
                            
                        {
                sitePreference.site_values && sitePreference.site_values.length > 0 ?
                
                <>
                    <div className='site-preference__items'>
                        
                    {
                        sitePreference.site_values.map((item,index) => {
                            //for (var i=0; i<sitePreference.site_values.length; i++){
                            
                            return <div className='site-preference__item' key={'SitePreference' + index}>
                                 <tr >
                            <td style={style1}>{item.groupId}
                            <div>
                            <button ref={descButtonRef} onClick={() => {getDescription(item.groupId,index);}}  class="button-description">
                                 Description
                            </button>
                                {
                                (<div id={item.groupId}>
                                     {desc} 
                                     </div>)
                                }
                            </div>
                             </td>
                            
                            <td style={style3}>{getFlagStatus(item.value.toString())}</td>
                            </tr>
                        
                            </div>
                        })
                    }
                    </div>
                </>
                : 
                <div className='no-data'>
                </div> 
            }
                        
                        </tbody>
            </table>  
            }
                 
        </>
    )

但是我看到它显示所有按钮描述的描述，而不是所选按钮或正在传递的索引。

如何传递当前选定的按钮并仅显示该特定按钮描述并隐藏其余其他按钮描述：

第一个按钮的 onclick 结果 描述