Wie Rendern Array von JSON-Daten in React Redux

Question

Ich lerne React und stieß auf ein etwas heikles Problem für mein Niveau. Von meinem API-Aufruf erhalte ich eine Antwort, die ein Array von Objekten ist. Ich möchte dies in einer Liste anzeigen. Um die Vorstellung davon, wie die Antwort aussieht, dies ist ein Beispiel (es ist von JSON)

data = [ 
    {0: {name: "tom"}}, 
    {1: {name: "Pope"}}, 
    {2: {name: "jack"}} 
]; 

Um diese Informationen in meinem Container zu machen Ich versuche, so etwas wie diese:

render() { 
    const items = data.map((d) => <li>{d.name}</li>); 

    return (
    <div> 
     <ul> 
     {items} 
     </ul> 
    </div> 
) 
} 

Aber es ist nichts drucken. Ich bekomme nicht einmal einen Fehler. Ich denke, die Art, wie ich die Antwort analysiere, ist falsch.

Was ist der richtige Weg, um mein kniffliges Problem zu lösen?

Answer 1

Auf der

const items = data.map((d) => <li>{d.name}</li>); 

Ihr d ist das Objekt: {0: {name: "tom"}, nicht nur {name: "tom"}

So müssen Sie zuerst den Wert für jede solche Aufgabe zu übernehmen.

Diese (obwohl wahrscheinlich optimal nicht) wird die Arbeit machen:

const items =data.map((d) => { 
    const val= Object.values(d)[0]; 
    return (<li>{val.name}</li>) 
}); 

Hoffe, dass es

Answer 2

Ihr Fehler besteht darin, wie Sie die Daten extrahieren. Die Referenz d bezieht sich auf ein Objekt, das eine 0, 1, 2-Eigenschaft enthält. Bei diesen Werten handelt es sich um ein anderes Objekt, das eine name-Eigenschaft enthält.

Basierend auf dem Muster des Objekts können Sie das name Objekt erhalten, indem den aktuellen Index mit:

const items = data.map((d,i) => (<li>{d[i].name}</li>)); 

Demo:

const data = [ 
 
    {0: {name: "tom"}}, 
 
    {1: {name: "Pope"}}, 
 
    {2: {name: "jack"}} 
 
]; 
 

 
class Demo extends React.Component { 
 
    render() { 
 
     const items = this.props.data.map((d,i) => (<li>{d[i].name}</li>)); 
 

 
    return (
 
     <div> 
 
     <ul> 
 
      {items} 
 
     </ul> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Demo data={data} />, 
 
    demo 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="demo"></div>

Answer 3

Das Problem, wie @rafahoro explained hilft, es sthat jedes Objekt eine einzigartige Eigenschaft enthält, und das eigentliche Objekt mit Der Wert befindet sich in dieser Eigenschaft.

Wenn Sie können, ändern Sie die API, so würde die Antwort einfache Objekte sein. Die anderen Optionen sind den Wert von jedem Objekt zu extrahieren, oder ff die Eigenschaften in den Objekten sind inkrementell (0, 1, 2 wie in dem Beispiel), können Sie es in ein Objekt konvertieren können unter Verwendung von:

1. Merge all Objekt, in einer durch das Array in Object#assign
2. Verbreitung Fügen Sie die Eigenschaft length

3. in ein Array konvertieren zurück mit Array#from

   const arr = Array.from (Object.assign ({Länge: data.length} , ...Daten));

Demo:

const data = [ 
 
    {0: {name: "tom"}}, 
 
    {1: {name: "Pope"}}, 
 
    {2: {name: "jack"}} 
 
]; 
 

 
const arr = Array.from(Object.assign({ length: data.length }, ...data)); 
 

 
class Demo extends React.Component { 
 
    render() { 
 
    const items = this.props.data.map((d) => <li>{d.name}</li>); 
 

 
    return (
 
     <div> 
 
     <ul> 
 
      {items} 
 
     </ul> 
 
     </div> 
 
    ) 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <Demo data={arr} />, 
 
    demo 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 

 
<div id="demo"></div>