Kartenfunktion in reagieren (err: TypeError: e.map ist keine Funktion)

Question

Ich möchte Elemente von Requisiten, ich kann es mit Anfangszustand, aber nicht mit Antwort vom Server. machen meine Funktion:

const { data } = this.props; 
    return (
     <div > 
      {data.map((item, index) => 
       <div key={index} className="row"> 
        <span data = { data } className="number col-4 col-md-8">{item._id}</span> 
        <span data = { data } className="date col-4 col-md-2">{item.date}</span> 
        <span data = { data } className="tag col-4 col-md-2">{item.tag}</span> 
        <div className="col-md-12 "> 
        {item.text} 
        </div>     
       </div> 
     )} 
     </div> 
    ) 
    } 

ich diesen Fehler:

TypeError: e.map is not a function

Antwort: Object {data: Array (12), Stand: 200, status: "OK", headers: Object, config: Objekt ...}

Answer 1

Sie können den Standardwert data verwenden, wenn eine Antwort aussteht. In dieser Zeit wird data nicht

definiert

const { data = [] } = this.props; 

oder benutzen Zustand in jsx:

render() { 
    if (!data || !data.length) return null; 
    ... 
} 

Answer 2

Es sieht aus wie Ihre Antwort nur die rohe Reaktion ist. Wenn Sie holen verwenden, ist es das, was die Versprechen Kette aussehen sollte:

fetch(fromMySource).then(resp => resp.json()).then(data => doSomething(data)); 

Es sieht aus wie Sie bzw. könnten versuchen, direkt zu verwenden, das würde Ihre Datenarray wie das Response-Objekt aussehen geschrieben Sie in Ihrem Frage.

Answer 3

Fügen Sie einfach diese Worte Sie Map-Funktion, Weil Sie überprüfen müssen, ob Array existiert dann Funktion execut Karte

const { data } = this.props; 
    return (
     <div > 
      {data && data.lenght && data.map((item, index) => 
       <div key={index} className="row"> 
        <span data = { data } className="number col-4 col-md-8">{item._id}</span> 
        <span data = { data } className="date col-4 col-md-2">{item.date}</span> 
        <span data = { data } className="tag col-4 col-md-2">{item.tag}</span> 
        <div className="col-md-12 "> 
        {item.text} 
        </div>     
       </div> 
     )} 
     </div> 
    ) 
    } 

Answer 4

Wäre diese übergeordnete Komponente Änderung zu ändern:

this.setState({ 
    data: response 
    }) 

zu

this.setState({ 
    data: response.data 
    }) 

Ich habe versucht, die Daten von der Kind-Comp zu erreichen onent, aber es funktioniert nicht (wahrscheinlich wegen der Kartenfunktion)