React.js循环渲染TextButton按钮未在页面展示问题求助

问题根因 #

• 你的buttons1函数没有返回任何JSX内容：for循环中生成的<TextButton />组件既没有被收集到数组中，也没有被return出来，函数执行后默认返回undefined，因此没有内容可以被React渲染。
• 隐含问题1：循环渲染React组件时需要为每个子项添加唯一key属性，否则会触发运行时警告，列表更新时也可能出现渲染异常。
• 隐含问题2：组件名test首字母为小写，React会将其识别为原生HTML标签，不符合自定义组件命名规范，建议修改为首字母大写的Test。

修复方案 #

方案1：修改原for循环逻辑（兼容你的原有写法） #

const Test: React.FC<IProps> = () => {
  const buttons1 = () => {
    // 声明数组存储生成的按钮组件
    const buttonList = []
    for(let i = 0; i < good.length; i++){
      buttonList.push(
        <TextButton
          key={good[i].id ?? i} // 优先用数据唯一id作为key，无唯一值时临时用索引
          label={good[i].name}
          onClick={() => {
            // 补充你的点击逻辑
          }}
        />
      )
    }
    // 返回组件数组供React渲染
    return buttonList
  };

  return(
    <div>
       {buttons1()}
       <TextButton
           label="test1"
           onClick={() => {}}
        />
    </div>
  )
}

方案2：更推荐的Array.map写法（React循环渲染的通用实现，无需单独封装函数） #

const Test: React.FC<IProps> = () => {
  return(
    <div>
       {/* 直接在JSX中遍历数组生成组件 */}
       {good.map(item => (
         <TextButton
           key={item.id ?? item.name}
           label={item.name}
           onClick={() => {}}
         />
       ))}
       <TextButton
           label="test1"
           onClick={() => {}}
        />
    </div>
  )
}

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