Iterate Schleife über Statusobjekt mit einem Array-Schlüssel in React

Question

Ich habe eine Funktion getBar() wie ein Objekt zurückzukehr:

{ 
    foo: 'value', 
    array: ['a', 'b', 'c'] 
} 

Hier ist meine Komponente reagieren, um die obige Funktion dh getBar() Aufruf:

class foo extends Component { 

    state = { 
    bar: {} 
    };  
    componentDidMount(){ 
    this.setState({ 
     bar : getBar() 
    }); 
    } 
    render() { 
    {this.state.bar.array.map((value, i) => <div class="row" key={i}>{value}</div>)} 
    } 
} 

Es gibt mir immer Uncaught TypeError: Cannot read property 'map' of undefined Fehler. Exploring similar questions, kam ich zu wissen, dass ich ein leeres Zustandsarray deklarieren muss, das ich auf verschiedene Weisen tat, aber keines funktionierte. Kann mir bitte jemand eine passende Antwort geben, vorzugsweise mit vollständiger Logik.

Ich versuchte eine andere Möglichkeit, die State-Array zu einem const in render() zu deklarieren, aber nicht zu erfolgreichen Ergebnissen.

Answer 1

Ok, so ist dies tatsächlich etwas mit Ihrem component's lifecycle

dem Problem zu tun ist, dass Ihre render Verfahren vor dem Verfahren componentDidMount laufen. Also das erste Mal Ihre Komponente Ihr Zustand macht sieht wie folgt aus:

{ 
    bar: {}, 
} 

Also keine Array-Eigenschaft auf bar, was bedeutet, dass Sie nicht über sie abbilden kann (weshalb Sie Fehler erhalten). Stattdessen können Sie die Methode componentWillMount verwenden, um den Status festzulegen, bevor die Rendermethode ausgeführt wird, oder Sie können überprüfen, ob das Array vor dem Zuordnen aktiviert ist.