React JS遍历对象数组渲染Col组件仅返回单个结果问题求助

• 你将本身就是数组的myObject额外包裹了一层[]，相当于生成了一个新数组，新数组里只有myObject这一个元素，所以map遍历只会执行1次，不管原数组有多少个元素，最终都只能渲染出1个Col组件。
• 直接调用myObject.map报错，是因为myObject在组件初始渲染时为undefined，父组件还未完成数据传递/异步数据还未返回，不存在map方法。
• 你的代码存在函数重名冲突，外层函数和内部定义的渲染函数都叫renderMyPage，会导致作用域调用异常。

直接使用如下修复后的代码即可：

function renderMyPage(props) {
  // 解构时设置默认空数组，避免undefined调用map报错
  const { myObject = [] } = props

  // 直接遍历原数组，不要额外加[]，同时给渲染项加唯一key属性
  return myObject.map((c, i) => {
    return (
      <Col key={i}>
        My data here: {c.periodname}
      </Col>
    )
  })
}

如果需要保留内部渲染函数的封装，修改内部函数名避免重名即可：

function renderMyPage(props) {
  const { myObject = [] } = props

  const renderCols = () => {
    return myObject.map((c, i) => {
      return (
        <Col key={i}>
          My data here: {c.periodname}
        </Col>
      )
    })
  }

  // 其他逻辑...
  return <>{renderCols()}</>
}

遍历渲染列表项时必须添加唯一key属性，否则React会抛出渲染警告，你也可以用业务唯一字段比如periodname（如果值唯一的话）代替索引i作为key值。

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