Ich habe in meinem Reaktionsaufruf eine Funktion ausgeführt, die eine API aufruft und einen Status basierend auf den von dieser API empfangenen Daten festlegt

getUserList() {
    API.get('/userlist')
        .then(response => {
            this.setState({
                userList: response.data
            }, () => {
                console.log(this.state.userList) //I can see this
            });
        })
}

So sieht mein Konstruktor aus

constructor(props) {
    super(props)
    this.state = {
        retracted: false,
        userList: []

    }
    this.getUserList = this.getUserList.bind(this);
}

Ich nenne es in componentDidMount ()

componentDidMount() {
    this.getUserList();
}

Aber dann stürzt mein Rendering ab, weil beide console.log undefiniert zurückgeben

render() {
    var users = this.state.userList;
    var user = users[0].email //cannot read email of undefined

    console.log(this.state.userList)
    console.log(users)
    return (
        <div class="maincontainer">
            <div className="content-landing">
                 <p>{user}</p> 
            </div>

        </div>
    )
}
0
mouchin777 19 Feb. 2020 im 12:59

4 Antworten

Beste Antwort

componentDidMount ist nicht async und kann es auch nicht sein. Sie sollten sich während des asynchronen Aufrufs mit Übergangszuständen wie loading befassen.

Überlegen Sie, ob Sie eine Überprüfung durchführen möchten, da das Ergebnis noch nicht abgerufen wurde:

    render() {
      var users = this.state.userList;

      if (users.length === 0) {
        return <p>loading</p>
      }

      return <p>{users[0].email}</p>
    }

Dies kann je nach Verwendung möglicherweise nicht vollständig funktionieren, insbesondere bei der Fehlerantwort. Sie prüfen immer noch, ob error ein Fall / Zustand vorliegt, in dem users.length === 0, jedoch nicht loading.

1
HollyPony 19 Feb. 2020 im 10:28

Dies ist ein Fall von anfänglich undefinierten Daten, bis Daten in Benutzern vorhanden sind. Diese Zeile var user = users[0].email stürzt ab, weil versucht wird, auf nicht vorhandene Daten zuzugreifen. Schreiben Sie diesen Teil also neu in:

var user = users && users[0] ? users[0].email : null
1
Lelouch 19 Feb. 2020 im 10:21
var user = users[0].email //cannot read email of undefined

Dieser Code ist der Schuldige. denn beim ersten rendern ist leer.

Können Sie eine Nullprüfung versuchen, bevor Sie auf Benutzer zugreifen? [0] .email hier ein Beispiel

var user = users.length > 0 ? users[0].email : ""
1
Frustrated Programmer 19 Feb. 2020 im 10:07

Ich habe es mit Axios versucht. Das folgende Codefragment finden Sie, da das Festlegen des Status zum Ausführen des Renderings führt:

var self = this;
axios.get('/url')
.then(function (response) {
  console.log(response);
  self.setState({userList: response.data})
})
.catch(function (error) {
  console.log(error);
});
0
Sarvesh Mahajan 19 Feb. 2020 im 10:05