Как передать массив состояний в props

Итак, у меня есть 2 файла React: App.js и category.js. Когда я передаю свой массив в category.js, он показывает огромный кусок текста вместо того, чтобы разбивать его на разные кнопки массива. Я пробовал искать, но не понимаю, как это сделать. Кто-нибудь может это объяснить?

вот приложение класса

class App extends React.Component {
Object.keys(data.categories).forEach((category,index) => {
    arr.push(data.categories[index].name);
})

render() {
return (
<div>
    <Categories 
      categoryName = { this.state.categoryName }
    />
</div>

а вот категории, использующие реквизиты

const Categories = props => (
<div>
    <br /> 
    { props.categoryName && <button> { props.categoryName } </button>}
</div>
);

Привет, @Kevin, не могли бы вы предоставить образец объекта данных, который вы пытаетесь перебрать.

— 11.10.2018 16:51

Привет, @JigneshRaval. Я использую вызов API, поэтому он в формате JSON, например, {категории: {1,2,3,4,5 .....}}.

— 11.10.2018 16:54

javascript reactjs state react-props

11.10.2018 16:37

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

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

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

108

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Ответ принят как подходящий

Вам нужно сопоставить свой массив categoryName

const Categories = props => (
   <div>
      <br /> 
      { props.categoryName &&
        props.categoryName.map(name => <button>{name}</button>)}
   </div>
   );

О, понятно, спасибо за простое решение по его отображению!

— 11.10.2018 16:58

11.10.2018 16:55

Предполагая, что ваши категории представляют собой массив объектов в состоянии вашего компонента, map по категориям состояний и возвращает компонент Category с каждой итерацией массива.

function Category({ categoryName }) {
  return (<button>{categoryName}</button>);
}


class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = { categories: [ { categoryName: 'Bob', type: 'string' },  { categoryName: 'Trevor', type: 'number' }] };
   }

   render() {
     return (
       <div>
         {this.state.categories.map(category => {
           return <Category categoryName = {category.categoryName} />
         })}
       </div>
     )
   }
}

ReactDOM.render(
  <App />,
  document.getElementById('container')
);

<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id = "container"></div>

11.10.2018 16:56

Другие вопросы по теме

Показывает err_connection_timed_out, когда я пытаюсь увидеть свое приложение для реагирования на мобильном телефоне

Таблица дизайна React Ant - выбор нескольких строк (столбцов)

Изменить фон изображения SVG

Передача props в компоненте Redirect (React.js) не работает должным образом

Машинописная логика d.ts находится

Асинхронные действия разрешаются до получения результата выборки

Добавление абсолютного пути к файлам css / js при создании приложения React

Как изменить заголовки входящих ответов с помощью apache?

Как предупредить компонент React, когда сага redux положила успешное действие?

Как регистрировать HTTP-запрос и ответ с помощью ApolloClient

Как передать массив состояний в props

Ответы 2

Другие вопросы по теме

Похожие вопросы