Objekte gelten nicht als Kind Reagieren (gefunden: [Objekt-Versprechen])

Ich versuche zu Rendern eine Liste der Beiträge durch die Zuordnung über ein array. Ich habe dies viele Male zuvor, aber für einige 

renderPosts = async () => {
    try {
      let res = await axios.get('/posts');
      let posts = res.data;
      return  posts.map((post, i) => {
        return (
          <li key={i} className="list-group-item">{post.text}</li>
        );
      });
    } catch (err) {
      console.log(err);
    }
  }

  render () {
    return (
      <div>
        <ul className="list-group list-group-flush">
          {this.renderPosts()}
        </ul>
      </div>
    );
  }

Alles was ich bekomme ist:

Nicht abgefangener Fehler: die Objekte werden nicht gültig wie ein Kind Reagieren (gefunden: [Objekt-Versprechen]). Wenn Sie bedeutete für die Darstellung einer Sammlung von Kinder, verwenden Sie ein array statt.

Ich habe die Daten zurückgegeben, die von renderPosts und es ist ein array mit den richtigen Werten und keine Versprechungen. Was ist denn hier Los?

  • Sie können immer nur 1 zurück-Objekt aus reagieren. Sie müssen zurückkehren Beiträge.anzeigen const someVar = posts.Karte, und dann wieder <ul>{someVar}</ul> ... dass die Art und Weise, die Sie zurückgeben, ein Objekt gewickelt. reactjs.org/docs/lists-and-keys.html
  • während der erste Kommentar ist wahr, das größere problem ist, dass Sie versuchen, um return JSX von einer async-Methode, die nicht arbeiten. Sie müssen zu Holen Ihre async-Daten in componentDidMount() - und call - this.setState wenn Ihre api zurück, anstatt direkt JSX
  • Ich habe versucht, diese, bevor Sie mit componentWillMount, weil ich davon ausgegangen, das Problem war, aber es hat nicht funktioniert. Habe es nur mit componentDidMount und es funktionierte! Dank azium.
InformationsquelleAutor Aaron | 2017-12-05
  1. 11

    this.renderPosts() zurück Promise nicht die tatsächlichen Daten, und AFAIK Reactjs nicht lösen Verspricht implizit in render.

    Müssen Sie es so machen

    componentDidMount() {
  this.renderPosts();
}

renderPosts = async() => {
  try {
    let res = await axios.get('/posts');
    let posts = res.data;
    //this will re render the view with new data
    this.setState({
      Posts: posts.map((post, i) => (
        <li key={i} className="list-group-item">{post.text}</li>
      ))
    });
  } catch (err) {
    console.log(err);
  }
}

render() {
  return (
    <div>
      <ul className="list-group list-group-flush">
        {this.state.Posts}
      </ul>
    </div>
  );
}
    InformationsquelleAutor Ja9ad335h
  2. 4

    Erhielt ich auch die gleiche Fehlermeldung beim anlegen eines async-funktionale Komponente. Funktionale Komponenten sollten nicht async.

    const HelloApp = async (props) =>  { //<<== removing async here fixed the issue
  return (
    <div>
      <h2>Hello World</h2>
    </div>
  )
}
ReactDOM.render(<HelloApp />, document.querySelector("#app"))

    jsfiddle

    • Diese Feste für mich - der stacktrace nicht wirklich Weg geben, dass das war das Problem!
    • Weder render Funktion in einer Klasse Komponenten async ich.e Rückkehr eine Promise.
    InformationsquelleAutor Padhraic
Schreibe einen Kommentar