Выборочное отображение данных JSON в ReactJS

Question

У меня есть API, который отправляет мне JSON данные в ответ. Это в основном отправка меню для указания на c роль.

-----------------------------------------------------
{
Menu : Home
Profile : End User
}
{
Menu : Add Questions
Profile : End User
}
{
Menu : Modify Answers
Profile : End User
}
------------------------------------------------- and another user JSON
{
Menu : Home
Profile : Admin
}
{
Menu : Approve Questions
Profile : Admin
}
{
Menu : Approve Answers
Profile : Admin
}

Я должен показать левое меню в реакции, как показано ниже

Добро пожаловать {Пользователь}, вошел как {Профиль}

• На главную
• Добавить вопросы
• Изменить ответы

Мой код:

-----------------
return (
      <div class="content-section implementation button-demo">
        <h1>NK{userMenuResponse.Profile}</h1> //Not working
        {userMenuResponse.length
          ? userMenuResponse
               .map((menu, id) => (
                <div key={id}>

                  {menu.Menu} for {menu.Menu}

                </div>
              ))
          : null}
      </div>
    );
-----------------------------

С функцией карты я получаю профиль неоднократно .. Пожалуйста, руководство. ТИА

Answer 1

Проблема: userMenuResponse - это массив, тогда userMenuResponse.Profile будет иметь C ошибку, вам нужно сначала получить доступ к объекту по индексу, т.е. userMenuResponse[0].Profile

Решение: Если вы переместите троичную область за пределы содержимого, вы можете гарантировать доступ к userMenuResponse[0]. Затем вы можете отобразить меню как обычно. Fragment используется для возврата одного узла в соответствии с соглашением о реакции.

return (
  <div class="content-section implementation button-demo">
    {userMenuResponse.length ? (
      <Fragment>
        <h1>NK{userMenuResponse[0].Profile}</h1>
        {userMenuResponse.map((menu, id) => (
          <div key={id}>
            {menu.Menu} for {menu.Menu}
          </div>
        ))}
      </Fragment>
    ) : null}
  </div>
);

Предложение для JSON data

[{
  Menu: "Home"
  Profile: "End User"
},
{
  Menu: "Add Questions"
  Profile: "End User"
},
{
  Menu: "Modify Answers"
  Profile: "End User"
}]

Предварительно обработайте его, чтобы уменьшить / нормализовать сохраненные / сохраненные JSON данные; может быть проще потреблять, если бы он имел эту форму

{
  profile: string,
  menus: string[]
}

IE

{
  profile: "End User",
  menus: [
    "Home",
    "Add Questions",
    "Modify Answers"
  ]
}

const endUserData = [{
    Menu: "Home",
    Profile: "End User"
  },
  {
    Menu: "Add Questions",
    Profile: "End User"
  },
  {
    Menu: "Modify Answers",
    Profile: "End User"
  }
];

const adminData = [{
    Menu: "Home",
    Profile: "Admin"
  },
  {
    Menu: "Approve Questions",
    Profile: "Admin"
  },
  {
    Menu: "Approve Answers",
    Profile: "Admin"
  }
];


const normalizeData = data => data.reduce((data, item) => {
  if (!data.profile) {
    data.profile = item.Profile;
  }
  data.menus.push(item.Menu);
  return data;
}, {
  profile: '',
  menus: []
});

console.log(normalizeData([]));
console.log(normalizeData(endUserData));
console.log(normalizeData(adminData));

Тогда функцию рендеринга можно немного упростить до

return (
  <div class="content-section implementation button-demo">
    <h1>NK{data.profile}</h1>
    {data.menus.map((menu, id) => (
      <div key={id}>
        {menu.Menu} for {menu.Menu}
      </div>
    ))}
  </div>
);