Блог

Главная - Вопросы по программированию - Есть ли способ настроить содержимое вкладок с данными json, загруженными с моего бэкенда в reactjs, с помощью map() или forEach()?

Есть ли способ настроить содержимое вкладок с данными json, загруженными с моего бэкенда в reactjs, с помощью map() или forEach()?

#javascript #json #reactjs #material-ui

Вопрос:

Я хочу назначить каждому тегу ключ объекта с помощью цикла, чтобы при нажатии на элемент я переходил к его содержимому в . Я попытался использовать map (), но я сомневаюсь, что это правильная методология, так как она не работает. Я начинаю с react. Так что любая помощь будет мне действительно полезна.

Вот код! Спасибо!

 <Tabs
   orientation="vertical"
   variant="scrollable"
   value={value}
   onChange={handleChange}
   aria-label="Vertical tabs example"
   className={classes.tabs}
>
   apiData.map((data, i)=> {
      <Tab label=`Item ${i}` key={i} {...a11yProps(i)} />
   })

  </Tabs>
    apiData.map((data, i)=> return <TabPanel value={value} key={i} index={i}> data </TabPanel>
  })

Комментарии:

1. что такое a11yProps . Это функция или объект? Если это функция, что вы возвращаете.

2. Вы пропустили return во вкладке итератор. Вот, apiData.map((data, i)=> {<Tab label=`Item ${i}` key={i} {...a11yProps(i)} /> }) измените его на {apiData.map((data, i) => { return <Tab label={data} {...a11yProps(i)} />;})}

Ответ №1:

Когда вы используете код javascript внутри JSX, вам нужно вложить его внутрь { } .

При использовании { } в теле функции стрелки вам необходимо использовать return оператор для возврата данных. Если у вас нет { } и есть однострочный оператор, возвращается оператор oneline.

 <Tabs
    orientation="vertical"
    variant="scrollable"
    value={value}
    onChange={handleChange}
    aria-label="Vertical tabs example"
    className={classes.tabs}
>
    {apiData.map((data, i) => {
        return <Tab label={data} {...a11yProps(i)} />;
    })}
</Tabs>

{
    apiData.map((data, i) => {
        return (
            <TabPanel value={value} key={i} index={i}>
                {data}
            </TabPanel>
        );
    })
}
Метки: , ,