2016-08-08 13 views
2

Ich versuche react-json-table zu verwenden, um eine einfache Datentabelle in einem react/redux Projekt zu erstellen. Wenn ich die Daten direkt in meiner Komponente übergebe, funktioniert alles einwandfrei. Wenn ich jedoch props verwende, wird die Tabelle nicht angezeigt.Wie sollte ich meine Requisite übergeben, um ein gültiges Array zu erhalten [Objekt]

Also hier ist mein Code, wenn ich hart bin Codierung der Daten:

var data = [{'alpha': 82, 'bravo': 20, 'charlie': 68}]; 
<JsonTable rows={ data } /> 

Es funktioniert gut.

Aber wenn ich die genau gleichen Daten durch meine Requisite direkt wie diese <JsonTable rows={ props } /> weitergeben, funktioniert es nicht. Ich habe meine Requisiten mit einem console.log({props}) überprüft, es funktioniert gut.

eine Idee? Muss ich meine Requisite auf eine bestimmte Art und Weise formatieren, bevor ich sie benutze?

danke.

+1

ist Ihre Requisiten ein Objekt oder ein Array. ? Was wird ausgegeben, wenn Sie 'console.log (typeof props)' und 'console.log (props)' ausführen? Vergewissern Sie sich, dass in der Konsolenanweisung keine geschweiften Klammern um Ihre Requisiten herum stehen. –

+0

so ist der Typ von Objekt. und wenn ich 'console.log (reps) mache, habe ich dieses' Objekt {alpha: 82, bravo: 20, charlie: 68} '... also denke ich, dass es ein Objekt ist, und ich schätze, ich brauche ein Array. Ist das mein Problem? –

+0

Ja. Stellen Sie sicher, dass Sie die Daten als Array an diese Komponente übergeben. –

Antwort

1

Seien Sie sicher, dass Sie die Daten als Array in den Requisiten zu dieser Komponente sind vorbei:

<JsonTable rows={[props]}/> 
+0

Ok das war einfach! Entschuldigung, ich hätte das selbst finden können. also sind die Unterschiede zwischen einem Array und einem Objekt nur [..] oder {...}? –

+1

In Javascript wird ein Array mit eckigen Klammern '[]' und ein Literalobjekt mit geschweiften Klammern '{}' deklariert. Die Schlüssel in einem Array sind seine Indizes (0,1,2 usw.) und in einem Objekt können die Schlüssel Strings ({'myKey': 'myValue'}) oder auch ganze Zahlen sein. In Ihrem Fall erwartet 'JsonTable' ein Array von Objekten zur Darstellung jeder Zeile und Sie haben ein Objekt bereitgestellt, das die Komponente zerstört hat. –