React TS：优化列表渲染与useState传值的更佳方案咨询

核心实现思路 #

React 里渲染列表的标准方式是使用数组的 map 方法，配合 useState 管理计数器状态，点击事件直接传递列表项数据而非通过 DOM 元素获取，这是更符合 React 声明式理念的最优方案。

代码示例 #

import { useState } from 'react';

// 示例列表数据，可根据实际场景替换
const listItems = ['选项1', '选项2', '选项3'];

function App() {
  const [counter, setCounter] = useState(0);

  // 点击回调直接接收列表项文本，无需操作DOM
  const handleButtonClick = (itemText: string) => {
    console.log('当前点击项:', itemText);
    // 使用函数式更新确保拿到最新的计数器状态
    setCounter(prevCounter => prevCounter + 1);
  };

  return (
    <div>
      <p>当前计数: {counter}</p>
      <ul>
        {listItems.map((item, index) => (
          // 列表项必须加唯一key，优先用业务唯一id，无id时可用index
          <li key={index}>
            <button onClick={() => handleButtonClick(item)}>{item}</button>
          </li>
        ))}
      </ul>
    </div>
  );
}

export default App;

针对你的疑问的说明 #

1. 关于列表渲染：
   Blazor 里用 @for 循环直接渲染，React 里则是通过数组的 map 方法实现等价逻辑。如果需要渲染 N 个动态元素（比如生成10个项），可以先构造长度为 N 的数组再遍历：

   const totalItems = 10;
   // ...
   <ul>
     {Array.from({ length: totalItems }, (_, idx) => (
       <li key={idx}>
         <button onClick={() => handleButtonClick(`动态项${idx + 1}`)}>动态项{idx + 1}</button>
       </li>
     ))}
   </ul>
   

   这和 Blazor 的 @for (int i=0; i<N; i++) 逻辑完全一致，只是语法层面的差异。

2. 关于计数器更新：
   用 setCounter(prev => prev + 1) 这种函数式更新，能避免闭包陷阱——尤其是在循环生成的点击回调里，确保每次更新都基于最新的计数器状态，比直接写 setCounter(counter + 1) 更可靠。

3. 关于获取按钮文本：
   直接把列表项的文本作为参数传给点击回调，比通过 DOM 元素（比如 e.target.textContent）获取更高效，也更符合 React 不直接操作 DOM 的设计思路，毕竟循环遍历的时候已经能拿到每个项的文本了。

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