javascript - 尝试使用 JS 对象填充组件但得到 "Functions not valid as React child"？

Question

我对 React 还很陌生，如果这是一个简单的问题，请原谅我。

我正在尝试使用 JavaScript 对象:

const gameCardData = {
  "university": {
    "elemental-wars": {
      "imgAlt": "Elemental Wars Start Screen",
      "imgPath": "../img/games/ElementalWars.png",
      "cardHeader": "Elemental Wars",
      "cardShortText": "A tactical game about using your units and spells to outsmart an opposing mage",
      "cardPlatforms": "Windows",
      "cardDate": "2018",
      "cardEngine": "Unity",
      "cardRoles": "Lead Programmer"
    }
  }
};

export default gameCardData;

填充一些组件。我的想法是，对于“大学”中的每个 child ，我都会有一张包含一些信息的卡片。但是当我尝试调用这个函数时:

getGameCards = category => () => {
    let data = gameCardData[category];
    return(
        <div>
            <ComplexCard
                imgAlt="Image alt"//{game.imgAlt}
                imgPath={require("../img/games/ElementalWars.png")}//game.imgPath)}
                cardHeader="Elemental Wars"//{game.cardHeader}
                cardShortText="A tactical game about using your units and spells to outsmart an opposing mage"//{game.cardShortText}
                cardPlatforms="Windows"//{game.cardPlatforms}
                cardEngine="Unity"//{game.cardEngine}
                cardRoles="Lead Programmer"//{game.cardRoles}
                cardDate="2018"//{game.cardDate}
            />
        </div>
    );
};

我收到此警告，但屏幕上没有显示任何内容:

Warning: Functions are not valid as a React child. This may happen if you return a Component instead of from render. Or maybe you meant to call this function rather than return it.

我这样调用该函数:

class ComplexCardGrid extends Component {
...
    render() {
        return(
            <div>
                {this.getGameCards("university")}
            </div>
        );
    }
}

在你说什么之前，是的，我知道 getGameCards 还没有使用我提供的数据，但这只是为了在我使用之前获得一个工作示例for 循环根据提供的数据创建所有卡片。

但是我该如何摆脱这个警告呢？我想这是关于 React 的一些基本问题，我不明白，因为当我在 Google 上查找问题时，它的解决方案似乎并不相同。

Answer 1

更改以下内容..

getGameCards = category => () => {

至:

getGameCards = category => {