ReactJs: как обрабатывать пустой массив с функцией карты внутри метода рендеринга

Я пытаюсь распечатать таблицу с некоторыми данными JSON, но не могу отобразить пустой массив, когда использую метод карты.

ДАННЫЕ JSON:

    [{
	"id": 6,
	"firstname": "Sharon",
	"lastname": "Jenkins",
	"specialties": []
}, {
	"id": 2,
	"firstname": "Helen",
	"lastname": "Leary",
	"specialties": [{
		"id": 1,
		"name": "radiology"
	}]
}, {
	"id": 4,
	"firstname": "Rafael",
	"lastname": "Ortega",
	"specialties": [{
		"id": 2,
		"name": "surgery"
	}]
}, {
	"id": 5,
	"firstname": "Henry",
	"lastname": "Stevens",
	"specialties": [{
		"id": 1,
		"name": "radiology"
	}]
}]

Мой код:

 {this.state.vets.map(vet =><tr><td>{vet.firstname}</td>
                  {  
                                  
                  vet.specialties.map((subitem,i) => {
                       
                    return <td>{subitem.name}</td> })}<td>EDIT</td><td id = {vet.firstname}><div class = "funkyradio">

Теперь я получаю следующую ошибку ReactJs: как обрабатывать пустой массив с функцией карты внутри метода рендеринга

Поскольку у Шэрон нет специалиста, мне нужно указать N/A.

Как я могу проверить, что специальности пусты, и вывести N/A.

Это происходит потому, что массив специальностей вашего первого объекта пуст, поэтому вторая функция карты не выполняет итерацию по этому полю.

— 26.02.2019 08:53

javascript reactjs html

26.02.2019 08:45

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

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

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

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

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

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

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

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

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

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

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

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

2 371

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

Ответы 4

используйте условный оператор, подобный этому

{ this.state.vets.length > 0 
 ? this.state.vets.map(()=>Your logic)
 : <Your custom message/>
}

26.02.2019 08:52

В основном для удобства чтения вместо использования свойства объекта я бы создал отдельную функцию, которая будет возвращать особенности, если таковые имеются, иначе N/A

26.02.2019 08:54

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

попробуйте отображать всегда тег TD, например:

{
  this.state.vets.map(vet =>
    <tr>
      <td>{vet.firstname}</td>
        <td>                
          {vet.specialties.map((subitem,i) => {
            return <span>{subitem.name}</span>
          })}
        </td>
        <td>EDIT</td>
        <td id = {vet.firstname}>
          <div class = "funkyradio">

26.02.2019 08:55

<table>
        {dataJSON.map(({ id, firstname, lastname, specialties }) => {
          return (
            <tr>
              <td> {`${firstname} ${lastname}`} </td>
              <td> {specialties.map(specialty => specialty.name).join(",")} </td>
              <td> <span> EDIT </span> </td>
            </tr>
          );
        })}
</table>

26.02.2019 09:09

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

Кнопки меню меняют тени при нажатии React/CSS

TypeError: невозможно прочитать свойство 'bind' неопределенного для handleFocus

React native — рендеринг списка входных данных

Как проверить номер телефона с помощью реакции

Как я могу обновить поле ввода в дочернем компоненте из родительского компонента

Файлы вызываются без ссылки на них

Необработанное отклонение (TypeError): невозможно прочитать идентификатор свойства undefined

Как написать TypeScript интерфейс реквизита, содержащий объект, и объединить его с defaultProps

Ошибка: не удается найти модуль «экспресс» при отправке приложения узла в Heroku

Кликабельный div, действующий как функция кнопки, реагирует js

ReactJs: как обрабатывать пустой массив с функцией карты внутри метода рендеринга

Ответы 4

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

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