React实现点击选中div存储数据并更新useState状态的方法

• 从react中导入useState钩子，创建状态存储当前选中的股票数据，默认值设为null，代表初始状态下没有选中任何股票。
• 编写点击事件处理函数selectStockAction，接收点击对应的股票条目作为参数，触发时直接把该条目更新到选中状态中即可。
• 修正原有代码的语法问题：删除map循环中无意义的空Fragment嵌套，给循环生成的根div加上唯一的key属性（使用每条数据自带的唯一标识iid，比数组索引更稳定），删除标签上多余的无效s属性避免控制台报错。
• 可选优化：增加选中态视觉反馈，判断当前渲染项和选中状态存储的项id一致时，给对应div追加专属样式类，实现选中高亮效果。

import { useState } from 'react';
// 如果你项目中Label是自定义公共组件，放开下方注释替换为实际引入路径即可
// import Label from '你的组件存放路径';

export const data = [
  { symbol: 'ddd', stockNum: '2700', EPS: '234', PE: '11.2', iid: 'IRO3SAIZ0001' },
  { symbol: 'ggg', stockNum: '2700', EPS: '258', PE: '11.2', iid: '71483646978964608' },
  { symbol: 'ttt', stockNum: '2700', EPS: '266', PE: '11.2', iid: '46348559193224090' },
  { symbol: 'qq', stockNum: '2700', EPS: '211', PE: '11.2', iid: '10' },
  { symbol: 'iii', stockNum: '2700', EPS: '222', PE: '11.2', iid: '90' },
];

export default function StockList() {
  // 选中项状态
  const [selectedStock, setSelectedStock] = useState(null);

  // 点击选中处理逻辑
  const selectStockAction = (stockItem) => {
    setSelectedStock(stockItem);
    // 选中后要执行的其他逻辑（比如拉详情、跳转）直接写在这里即可
  };

  return (
    <div>
      <div className="d-flex">
        {data && data.length > 0
          ? data.map((item) => {
              return (
                <div 
                  key={item.iid}
                  // 选中时追加active类，可自行写css实现高亮效果
                  className={`box-stock ${selectedStock?.iid === item.iid ? 'stock-active' : ''}`}
                  onClick={() => selectStockAction(item)}
                >
                  <div className="top-stock skewed p-5">
                    <h1>{item.symbol}</h1>
                    <strong className="text-center" >
                      <span > (0.25)</span>
                      {item.stockNum}
                    </strong>
                    {/* 如果引入了Label组件，把下方div替换为Label即可 */}
                    <div className="text-center">
                      EPS:<span className="text-white">{item.EPS}</span>
                    </div>
                    <div className="text-center">
                      P/E:<span className="text-white">{item.PE}</span>
                    </div>
                  </div>
                </div>
              );
            })
          : 'no data'}
      </div>
      {/* 调试用展示选中数据，正式使用可删除 */}
      {selectedStock && (
        <div className="selected-info">
          当前选中：{selectedStock.symbol}，股票代码：{selectedStock.stockNum}
        </div>
      )}
    </div>
  )
}

• 列表渲染必须绑定唯一key属性，优先使用数据本身的唯一标识，不要用数组索引作为key，否则当列表排序、增删时可能出现渲染状态错乱的问题。
• 如果需要实现「点击已选中项取消选中」的效果，只需要修改selectStockAction逻辑：判断当前点击的条目iid和已存选中项的iid一致时，将选中状态重置为null即可。
• 选中后需要触发的其他业务逻辑，都可以直接写在selectStockAction函数中，能直接拿到当前选中的完整条目数据。

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