.map() undefiniert, obwohl ich ein Array übergebe

Question

Ich versuche, ein Array in meiner Component Rendermethode zuzuordnen, aber es sagt weiter .map is not a function, obwohl es ein Array ist.

return (
    <select className="c-select"> 
    <option value="">Choose your city</option> 
     {console.log(state.cities.items)} 
     {state.cities.items.map(city => <option key={city.slug} value={city.slug}>{city.name}</option>)} 
    </select> 
); 

Das Konsolenprotokoll gibt mir dieses Ergebnis:

[{ "id": 1, "name": "Berlin", "Land": "Deutschland", "default": 1 , "slug": "berlin"}, {"id": 2, "name": "Hamburg", "land": "Deutschland", "default": 0, "slug": "hamburg"}]

Ich habe keine Ahnung warum .map ist undefined - Fehle ich hier etwas?

Answer 1

Wenn Sie Chrome oder Firefox verwenden, sieht es so aus, als ob state.cities.items eine JSON-Zeichenfolge und kein Array ist.

Versuchen

{JSON.parse(state.cities.items).map(...)} 

Wenn Sie console.log realen Arrays, wird die Ausgabe wie Array [ Object, Object ] in Firefox oder >[Object] in Chrome sehen