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;

填充一些组件。这个想法是，对于“大学”中的每个孩子，我都会得到一张卡片，上面有一些信息。但是当我尝试调用此函数时：

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>
    );
};

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

警告：函数作为React子元素无效。如果返回Component而不是从render返回，则可能会发生这种情况。或者也许您打算调用此函数而不是返回它。

我这样调用函数：

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

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

但是我如何摆脱这个警告？我想我不了解这是React的基础知识，因为当我在Google上查询问题时，解决方案似乎并不相同。

Answer 1

更改以下内容。

getGameCards = category => () => {

收件人：

getGameCards = category => {

Answer 2

您的代码中有两个箭头（=>）

getGameCards = category => () => {

这意味着您有两个功能，第一个正在等待第二个返回。您必须这样称呼它：

getGameCards()()

所以您应该删除其中之一：

getGameCards = category => {

尝试使用JS对象填充组件，但获取“函数无效，作为React子对象”吗？

2 个答案: