React组件渲染报错：Render returned no data及forEach调用组件问题

嘿，我来帮你搞定这个React新手常见的坑！你的问题核心在于**forEach不会返回任何值**，而React组件的render方法必须返回可渲染的React元素（或者数组、null等），所以才会报“未返回任何内容”的错。

问题拆解 #

你现在用Object.keys(data()).forEach(...)，forEach只是遍历执行回调，它的返回值是undefined，相当于你的render方法返回了undefined，这显然不符合React的要求。另外还要注意：如果data.js导出的是一个对象（不是函数），你不需要调用data()，直接用data就好——不然会报错说data不是函数哦。

修复方案：用map代替forEach #

map方法会遍历数组并返回一个新数组，刚好可以用来生成一组Card组件，React能直接渲染这个数组。同时别忘了给每个列表项加上唯一的key属性，这是React列表渲染的必要规范。

修改后的Lister组件代码如下：

import React from 'react';
import data from "../../data/data";
import Card from "../card";

class Lister extends React.Component {
  render() {
    // 如果data是对象，直接用Object.keys(data)遍历
    return (
      Object.keys(data).map(function(key) {
        // 给每个Card加上key属性，用遍历的key作为唯一标识
        return <Card key={key} data={data[key]}/>
      })
    )
  }
}

export default Lister;

额外说明 #

1. 关于data的调用：如果你的data.js确实导出的是一个函数（比如返回对象的函数），那才需要写data()，但根据你描述的“data.js是一个对象”，直接用data更合理。
2. 箭头函数简化写法：你也可以用箭头函数让代码更简洁：

return Object.keys(data).map(key => <Card key={key} data={data[key]} />)

3. key属性的重要性：React依赖key来识别列表中元素的变化，避免不必要的重渲染，所以一定要加，而且要保证key在列表中是唯一的（这里用对象的key刚好合适）。

这样修改后，你的Lister组件就能正确返回一组Card组件，页面也能正常渲染数据啦！

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