Invarianten-Verletzung: Objekte werden nicht gültig wie ein Kind Reagieren (für verschachtelte Objekte)
in meine reagieren Komponente habe ich ein Objekt user
die aussieht wie
{
_id: xxx,
stats: {a: 1, b: 2, c: 3},
shops: [s1, s2, s3] //s1, s2, s3 are all objects
...
}
Und dann in meinem code, den ich angeben, dass es ein Objekt ist.
export class UserComponent extends React.Component<void, Props, void> {
static propTypes = {
user: PropTypes.array,
fetchProfile: PropTypes.func.isRequired
};
componentDidMount() {
this.props.fetchProfile();
}
render () {
const { user } = this.props;
return (
<div className='container text-center'>
{user}
<Link to="/">homeE</Link>
</div>
)
}
}
Aber wenn ich den code ausführen die Fehlermeldung sagt:
invariant.js:39 Uncaught Invariant Violation: Objects are not valid as a React child (found: object with keys {thumb, path, photo_id, shop_id, message, _id, date_added}). If you meant to render a collection of children, use an array instead or wrap the object using createFragment(object) from the React add-ons.invaria....
es scheint, dass ich etwas tun kann, wie createFragment(user)
. Aber das ist nicht für mich arbeiten, denn dieses Objekt hat eine Menge von verschachtelten Objekte wie die oben genannten.
Weiß jemand, wie das Problem gelöst werden?
Du musst angemeldet sein, um einen Kommentar abzugeben.
In dieser Zeile übergeben Sie den Wert
object
geben.In Ihrem Fall
user
muss einstring
geben oderReact component
(erstellt vonReact.createElement
) oderarray
Art vonReact elements
.Wenn Sie brauchen, um machen einige Daten vom Benutzer oder pass es an einer anderen Komponente, können Sie dies tun:
Und, natürlich, Sie haben zu definieren
User
reagieren Komponente, welcher Griff(render -) Eigenschaften der user-Objekt. InUser
Komponente, die wir bekommen könnenuser
Objekt durchthis.props.data
render
Methode der Komponente nur verantwortlich für das Rendernview
. Es ist nicht zum speichern oder berechnen Sie einige Daten. Was genau willst du mituser
Objekt? Sie können es in einen string konvertieren und dann zeigen Nutzer alle seine Schlüssel, und so weiter.user
Objekt zu einer anderen Komponente, wenn Sie gebraucht wird.