React - TypeError：无法读取显示第 36 行的未定义属性“地图”

Question

I don't see what I'm missing but it's giving me an error of "Cannot read property 'map' of undefined. The console is showing it's with this section"

    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>
      ));

Answer 1

You can do either of these:

1. Set an empty array as the default value for data , like so:

export const showDataOnMap = (data = [], caseType = "cases") => 

2. Or alternatively check whether data is defined before using it:

data && data.map((country) => (

Also side note - remember to put keys in the returned element when you are using 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
      }
  >