Как можно использовать данные JSON для динамического создания компонентов меню с помощью карты?

Question

Я пытаюсь динамически создать набор пунктов меню, используя данные, полученные из json. В настоящее время я пытаюсь сделать это путем сопоставления значений с реквизитами, но где-то у меня что-то не получается.

Вот код, который я использую, чтобы попытаться сделать это:

Const Generate = () => {
  {data.items.map(({id, url, title}) => (
     <MenuItem key={id}> 
      <Link to={url}> {title} </Link> 
     </MenuItem>
))
console.log('lol')}
}

и вот компонент, который пытается это использовать. Закомментировано, это выглядит и хорошо работает, пока жестко запрограммировано.

const Navigation = ({}) => (
  <React.Fragment>
    <Layout>
    <Sider
      breakpoint="xs"
      collapsedWidth="0"
      onBreakpoint={broken => {
      }}
      onCollapse={(collapsed, type) => {
      }}
    >
      <div className="logo">
          <h1 style={{ color: 'white', paddingLeft: 20, paddingTop: 26}}>
              {Generate}
          </h1>
      </div>
      <Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
        {Generate()}
        {/* <Menu.Item key="1">
        <Link to="/" > Hjem </Link>
        </Menu.Item>
        <Menu.Item key="2">
        <Link to="/skjema"> Mine Skjema </Link>
        </Menu.Item>
        <Menu.Item key="3">
        <Link to="/pasient"> Mine Pasienter </Link>
        </Menu.Item>
        <Menu.Item key="4">
            Søk
        </Menu.Item>
        <Menu.Item key="5">
            Filtrer
        </Menu.Item>   */}
      </Menu>
    </Sider>

    <Layout>
      <Header className="site-layout-sub-header-background" style={{ padding: 0 }} />
      <Content style={{ margin: '24px 16px 0' }}>
        <div className="content">
          <Switch>
            <Route  exact path={"/"} component={Dashboard} />
            <Route  exact path="/Skjema" component={MineSkjema} />
            <Route  exact path="/Pasient" component={MinePasienter} />
          </Switch>
        </div>
      </Content>
      <Footer />
    </Layout>
  </Layout>
  </React.Fragment>
)

export default withRouter(Navigation);

для справки, вот структура json:

const data =
  {
  "items": [
    {
      "id": 1,
      "url": "/",
      "title": "Hjem"
    },
    {
      "id": 2,
      "url": "/Skjema",
      "title": "Mine Skjema"
    },
    {
      "id": 3,  
      "url": "/Pasient",
      "title": "Hjem"
    },
    {
      "id": 4,
      "url": "/Search",
      "title": "Søk"
    }
  ]
  }

Где я делаю ошибку?

Answer 1

вы можете захотеть использовать функцию .map() при отображении списка объектов, и в вашем случае почему бы вам не попробовать что-то вроде этого?

Const Generate = () => {
  {data.items.map((e,i) => (
    <MenuItem key={i}> 
      <Link to={e.url}> {e.title} </Link> 
    </MenuItem>
   ))}

  }

Это должно быть работаю на вас.

Answer 2

Похоже, вы правильно поняли. Первое, что мне приходит в голову, это то, что Generate - это функция, но вы никогда ее не вызываете. Вместо этого у вас есть {Generate}, который оценивает объект функции напрямую, а не то, что он возвращает. Вместо этого у вас, наверное, должно быть {Generate()}.

Я предлагаю вам еще больше отладить свой код, добавив больше вызовов console.log(). Прочтите эту статью для получения дополнительных советов по отладке вашего кода.

Другая проблема, которую я вижу, заключается в синтаксисе вашей функции Generate():

Const Generate = () => {
  {data.items.map(({id, url, title}) => (
     <MenuItem key={id}> 
      <Link to={url}> {title} </Link> 
     </MenuItem>
))
console.log('lol')}
}

В частности, я думаю, что у вас есть дополнительные фигурные скобки. Правильный синтаксис должен быть примерно таким:

const Generate = () => {
  console.log('lol');
  return data.items.map(({id, url, title}) => (
     <MenuItem key={id}> 
      <Link to={url}> {title} </Link> 
     </MenuItem>
  ));
}

1. Существует только один набор фигурных скобок, заключающих тело функции жирной стрелки. Здесь используется синтаксис (<params>) => {<statements>}, где <params> - список параметров, а <statements> - список операторов, которые нужно выполнить.

2. При использовании фигурных скобок вокруг операторов в жирном стрелка, вы должны включить оператор return, чтобы вернуть результат. Это необходимо из-за оператора console.log(). Если есть только один оператор, то фигурные скобки можно удалить, и один оператор не требует возврата:

   const Generate = () =>
       data.items.map(({id, url, title}) => (
           <MenuItem key={id}>
               <Link to={url}> {title} </Link>
           </MenuItem>
   ));
   

Answer 3

Попробуйте что-то вроде этого:

<Menu theme="dark" mode="inline" defaultSelectedKeys={['1']}>
   {data.items.map(({id, url, title}) => (
      <MenuItem key={id}> 
        <Link to={url}> {title} </Link> 
      </MenuItem>
   )}
</Menu>

Или, если вы хотите использовать функцию, назовите ее:

const Generate = items =>
  items.map(({id, url, title}) => (
     <MenuItem key={id}> 
        <Link to={url}> {title} </Link>
     </MenuItem>
  )
;

Итак: {Generate(data.items)} Параметр передачи - хорошая идея, потому что это делает Generate чистой функцией!