React实现点击对应key的li动态渲染关联id的NumberStatus等数据方案

你需要新增选中状态存储当前点击的li对应id，再根据选中id匹配对应数据渲染即可，修改后的完整代码如下：

import { useState } from 'react';
// 此处补充你自己的其他引入逻辑，比如Bar组件的引入

// 你的业务组件代码
const YourComponent = () => {
  // 新增：存储当前选中的功能项id
  const [selectedInfoId, setSelectedInfoId] = useState(null);

  // 此处保留你自己的ProductDetail获取逻辑
  // const ProductDetail = 你的接口/状态返回值

  return (
    <>
      <ul>
        {ProductDetail && ProductDetail.chart?.functionalsInfo?.length ? 
          ProductDetail.chart?.functionalsInfo.map(Info => (
            <li 
              key={Info.id}
              onClick={() => setSelectedInfoId(Info.id)}
              style={{cursor: 'pointer'}}
            >
              {Info.seedShapeDisplayText}
            </li>
          )) : <li>暂无数据</li>
        }
      </ul>

      {selectedInfoId && ProductDetail?.chart?.functionalsInfo ? (
        // 根据选中的id匹配对应数据项
        (() => {
          const curInfo = ProductDetail.chart.functionalsInfo.find(item => item.id === selectedInfoId);
          const ingredientsInfo = curInfo?.materialsInfo?.[0]?.ingredientsInfo || [];
          const functionInfolabels = ingredientsInfo.map(arr => arr.ingredientDisplayText);
          const NumberStatus = ingredientsInfo.map(arr => arr.chartStatus);
          
          return (
            <div>
              Hi Number {NumberStatus.join(',')}
              <Bar 
                labels={functionInfolabels}
              />
            </div>
          )
        })()
      ) : <div>请点击上方选项查看对应数据</div>}
    </>
  )
}

• 新增selectedInfoId状态存储当前点击的li对应id，点击li时更新该状态
• 移除了原代码中固定取functionalsInfo[0]的逻辑，改为根据选中id匹配对应项后，再提取当前项的ingredientsInfo生成functionInfolabels和NumberStatus，和你的业务逻辑匹配
• 补充了未选中状态的提示内容，可根据自身需求调整展示逻辑

内容的提问来源于stack exchange，提问作者ssksksks