Блог

Главная - Вопросы по программированию - React — TypeError: не удается прочитать свойство ‘map’ неопределенной отображаемой строки 36

React — TypeError: не удается прочитать свойство ‘map’ неопределенной отображаемой строки 36

#javascript #reactjs

#javascript #reactjs

Вопрос:

Я не вижу, чего мне не хватает, но это выдает мне ошибку «Не удается прочитать свойство ‘map’ неопределенного значения. Консоль показывает, что она находится в этом разделе «

     export const showDataOnMap = (data, caseType = "cases") => 
      data.map((country) => (
        <Circle
          center={[country.countryInfo.lat, country.countryInfo.long]}
          color={caseTypeColors[caseType].hex}
          fillColor={caseTypeColors[caseType].hex}
          fillOpacity={0.4}
          radius={
            Math.sqrt(country[caseType]) * caseTypeColors[caseType].multiplier
          }
        >
          <Popup>
            <div className="info-container">
              <div
                className="info-flag"
                style={{ backgroundImage: `url(${country.countryInfo.flag})` }}
              ></div>
              <div className="info-name">{country.country}</div>
              <div className="info-confirmed">
                Cases: {numeral(country.cases).format("0,0")}
              </div>
              <div className="info-recovered">
                Recovered: {numeral(country.recovered).format("0,0")}
              </div>
              <div className="info-deaths">
                Deaths: {numeral(country.deaths).format("0,0")}
              </div>
            </div>
          </Popup>
        </Circle>
      ));

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

1. data не определено.. Вам нужно будет гарантировать его массив или проверить его существование перед использованием методов массива : data amp;amp; data.map . Это частая проблема при работе с асинхронными данными. Если data заполняется из вызова ajax, он может изначально не быть массивом.

2. Предполагая, что data это часть состояния в родительском компоненте, просто позвольте ему начинаться как []

Ответ №1:

Вы можете сделать любое из этих действий:

  1. Установите пустой массив в качестве значения по умолчанию для data , например, так:
 export const showDataOnMap = (data = [], caseType = "cases") =>
  1. Или, в качестве альтернативы, проверьте data , определено ли оно перед его использованием:
 data amp;amp; data.map((country) => (

Также примечание — не забудьте поместить ключи в возвращаемый элемент при использовании map :

   <Circle
      key={} // <-- add some unique value from the item here
      center={[country.countryInfo.lat, country.countryInfo.long]}
      color={caseTypeColors[caseType].hex}
      fillColor={caseTypeColors[caseType].hex}
      fillOpacity={0.4}
      radius={
        Math.sqrt(country[caseType]) * caseTypeColors[caseType].multiplier
      }
  >