React中如何将点击的map渲染列表项赋值给指定state？

你可以通过给点击事件回调传参的方式拿到当前点击项的对应数据，修改方式如下：

方案1：直接传参（最常用） #

首先修改selectStock函数，让它接收选中的股票数据作为入参：

const selectStock = (selectedStock)=>{
    setSearch("");
    setCurrentStock(selectedStock);
}

然后在map渲染li的时候，用箭头函数包裹点击事件，把当前遍历的stockname作为参数传给selectStock：

{stockNames.map((stockname) => {
  const { name, symbol} = stockname;
  return (
      <li className="displaySearch" onClick={() => selectStock(stockname)} key={symbol}>
          <p>{name} ({symbol})</p>
      </li>
  );
})}

方案2：自定义属性（适合超大量列表场景） #

如果你的列表数据量很大，不想每次渲染都生成新的箭头函数，可以用自定义属性的方案实现：

1. 给li添加自定义属性存储需要的字段

<li 
  className="displaySearch" 
  onClick={selectStock} 
  key={symbol}
  data-stock-name={name}
  data-stock-symbol={symbol}
>
  <p>{name} ({symbol})</p>
</li>

2. 在selectStock中从事件对象里读取自定义属性的值

const selectStock = (e)=>{
  const selectedStock = {
    name: e.currentTarget.dataset.stockName,
    symbol: e.currentTarget.dataset.stockSymbol
  }
  setSearch("");
  setCurrentStock(selectedStock);
}

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