React useState初始化数组使用map/forEach遍历无法渲染列表问题

你代码的问题出在map方法的回调函数写法上：箭头函数使用花括号{}包裹逻辑时，需要显式使用return语句返回要渲染的组件，你当前的写法没有返回值，导致map最终返回的是全为undefined的数组，所以没有内容渲染。

有两种修改方式可选：

方式1：使用隐式返回（逻辑简单时推荐） #

直接去掉箭头函数的花括号，让组件作为返回值隐式返回，同时建议补充key属性避免React遍历警告：

function App() {
  const [raffles, setRaffles] = useState<Raffle[]>([new Raffle("Raffle 1")])

  return (
    <div className="App">
      {
        raffles.map(raffle => 
          <RaffleCard 
            key={raffle.name} // 补充唯一key，若name可能重复建议给Raffle类加唯一id字段
            name={raffle.name}
            callback={joinRaffle} 
          />
        )
      }
    </div>
  );
}

export default App;

class Raffle {
  name: string

  constructor(name: string) {
    this.name = name
  }
}

方式2：显式添加return语句 #

如果遍历过程中需要写额外处理逻辑，可以保留花括号，手动加return：

raffles.map(raffle => {
  // 此处可添加其他处理逻辑，比如数据校验、字段加工等
  return (
    <RaffleCard 
      key={raffle.name}
      name={raffle.name}
      callback={joinRaffle} 
    />
  )
})

不要用forEach做遍历渲染，因为forEach没有返回值，即使你在回调里return组件也不会被收集到，遍历渲染JSX元素固定用map方法即可。

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