Тернарный оператор на карте () реагирует - PullRequest
Новая
       23

Тернарный оператор на карте () реагирует

0 голосов
/ 25 февраля 2019

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

import React from "react";

const Holidays = props => {
if (props.dataLoaded === false) {
    return null;
  } else {
return (
  <div className="table-responsive">
    <table>
      <thead>
        <tr>
          <th>Holiday</th>
          <th>Date</th>
          <th>Type</th>
        </tr>
      </thead>
      <tbody>
        {props.country.map((country, index) =>
          country && index === undefined ? (
            <p>{props.error}</p>
          ) : (
            <React.Fragment key={index}>
              <tr>
                <td className="holiday-name">
                  <strong>{country.name}</strong>
                  <br />
                  <p>{country.description}</p>
                </td>
                <td className="holiday-date">
                  {country.date.datetime.day}.{country.date.datetime.month}.
                  {country.date.datetime.year}
                </td>
                <td className="holiday-type">
                  {country.type[0]} {country.type[1]}
                </td>
              </tr>
            </React.Fragment>
        )
          )}
          </tbody>
         </table>
       </div>
      );
    }
      };

 export default Holidays;

Но с этим кодом, когда набирается несуществующий код состояния или больше символов, выдается ошибка «Ошибка типа: невозможно прочитать свойство map of undefined». Любая помощь приемлема

Ответы [ 2 ]

0 голосов
/ 26 февраля 2019

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

Причина, по которой это undefined на первый взгляд, заключается в большинстве сценариев, поскольку вы извлекаете данные из серверной части либо с сервера, либо из какого-либо общедоступного API.Перед завершением операции извлечения данных ваш props.country будет неопределенным или чем бы вы его не инициализировали.

Что вам нужно сделать, это изменить текущий код на: 

{props.country.map((country, index) =>
          country && index === undefined ? (
            <p>{props.error}</p>
          ) : (
            <React.Fragment key={index}>
              <tr>
                <td className="holiday-name">
                  <strong>{country.name}</strong>
                  <br />
                  <p>{country.description}</p>
                </td>
                <td className="holiday-date">
                  {country.date.datetime.day}.{country.date.datetime.month}.
                  {country.date.datetime.year}
                </td>
                <td className="holiday-type">
                  {country.type[0]} {country.type[1]}
                </td>
              </tr>
            </React.Fragment>
        )
)}

Что-то похожее на приведенное ниже, где мы проверяем ваш props.country и проверяем, загружен ли он - как только он есть, затем попробуйте использовать на нем map для рендеринга содержимого. 

{props.country ? props.country.map((country, index) =>
          country && index === undefined ? (
            <p>{props.error}</p>
          ) : (
            <React.Fragment key={index}>
              <tr>
                <td className="holiday-name">
                  <strong>{country.name}</strong>
                  <br />
                  <p>{country.description}</p>
                </td>
                <td className="holiday-date">
                  {country.date.datetime.day}.{country.date.datetime.month}.
                  {country.date.datetime.year}
                </td>
                <td className="holiday-type">
                  {country.type[0]} {country.type[1]}
                </td>
              </tr>
            </React.Fragment>
        )
): <div>Data Loading!</div>}

Итак, что мы делаем здесь, это добавляем еще один троичный условный оператор для проверки if props.country - это true ТО, затем применяем метод map, иначе вы просто возвращаете div с содержимым «Загрузка данных!»до загрузки данных.

Для пояснения мы добавляем props.country ? в самом начале вашего кода внутри открывающую фигурную скобку { и : <div>Data Loading!</div> в конце справа после последняя закрывающая скобка ) и перед закрывающая фигурная скобка }.

Теперь это <div>Data Loading!</div> может быть чем угодно, вам не нужно помещать div или текст, который вы могли быПроще говоря, null, но до того, как данные будут извлечены за эти доли секунды, там будет пустое место, где будут находиться ваши выходные данные.

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

Редактировать: Вы также можете инициализировать props.country в массив, чтобы использование .map не приводило к ошибке автоматически, даже если она пуста.Если это было передано как реквизит от состояния вашего родительского компонента, просто выполните: 

state = {
   country: []
}

Хотя предыдущие методы решения этой проблемы лучше.Но вам все же, вероятно, следует привыкнуть инициализировать свои свойства состояния данными, которые они в конечном итоге будут содержать.

0 голосов
/ 26 февраля 2019 
import React from "react";

const Holidays = props => {
  return (
    <div className="table-responsive">
      <table>
        <thead>
          <tr>
            <th>Holiday</th>
            <th>Date</th>
            <th>Type</th>
          </tr>
        </thead>
      <tbody>
        {!props.country || props.country.length == 0 ? <p>{props.error}</p> : props.country.map((country, index) =>
            <React.Fragment key={index}>
              <tr>
                <td className="holiday-name">
                  <strong>{country.name}</strong>
                  <br />
                  <p>{country.description}</p>
                </td>
                <td className="holiday-date">
                  {country.date.datetime.day}.{country.date.datetime.month}.
                  {country.date.datetime.year}
                </td>
                <td className="holiday-type">
                  {country.type[0]} {country.type[1]}
                </td>
              </tr>
            </React.Fragment>
          )}
        </tbody>
      </table>
    </div>
  );
};

export default Holidays;
...