Пытаетесь использовать объект JS для заполнения Компонентов, но получаете «Функции, недопустимые как дочерний элемент React»?

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.Это может произойти, если вы вернете компонент вместо рендера.Или, может быть, вы хотели вызвать эту функцию, а не возвращать ее.

Я вызываю функцию следующим образом:

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 => {