Was ist der beste Weg, um mit undefinierten Requisiten in react.js umzugehen?

Question

Angenommen, ich habe eine Aktion, die beim Laden der Seite ausgelöst wird, wie zB in der Datei index.js.

Beispiel

store.dispatch(loadData()); 

in meinem Minderer initialisieren ich Zustand zu einem Objekt. So etwas wie dieses

function myReducer(state = {}, action) 

jetzt habe ich einige intelligente Komponente, die zu meinem Zustand abonniert hat und leitet sie dann an eine andere Komponente nach unten, um die Daten anzuzeigen. Ein weiterer wichtiger Hinweis für dieses Szenario ist die Tatsache, dass das Abrufen der Daten asynchron erfolgt. Nehmen wir auch an, dass der Schlüssel dieses Objekts ein Array ist. So würde die Markup-Komponente dieses so etwas wie

{this.props.object.key.map(k => do something)} 

Jetzt haben seit Schlüssel nicht definiert ist, kann ich nicht Karte auf sie anrufen und ich sprengen. Die Art, wie ich damit umgegangen bin, ist die Verwendung eines einfachen if-Checks. Wenn der Schlüssel definiert ist, führen Sie .map andernfalls null zurück. Zu dem Zeitpunkt, zu dem meine Daten vom Server zurückkommen, wird das Rendering aufgrund einer Zustandsänderung, die diese Komponente abonniert hat, erneut aufgerufen. An diesem Punkt ist der Schlüssel definiert und die Karte kann aufgerufen werden.

Ein anderer Ansatz ist zu definieren, wie Ihr Zustand im Reducer aussehen wird. Mit anderen Worten, wenn ich weiß, dass mein Zustand ein Objekt mit einer Array-Eigenschaft sein wird, könnte ich etwas ähnliches tun.

Dies wird in der Tatsache profitieren, dass ich jetzt nicht brauche, wenn die Kontrolle seit Schlüssel nie undefiniert ist.

Meine Fragen sind; Sind diese Ansätze besser als die anderen? Oder gibt es vielleicht einen anderen Weg, um damit fertig zu werden?

Answer 1

Im Allgemeinen ist der Ansatz, den ich nehmen möchte, Standardrequisiten auf der Komponente zu definieren, die die semantische Bedeutung von "leer" haben. Zum Beispiel in Zusammenhang mit der Ausgabe beschreiben Sie, ich würde in der Regel meine Komponenten wie dieser (ES6 Klassen Stil) Struktur:

class MyComponent extends React.Component { 
    static defaultProps = { 
     object: { 
      key: [] 
     } 
    }; 

    ... 

    method() { 
     // this.props.object.key is an empty array, but is overriden 
     // with a value later after completion of the reducer 
     // (trigerred asynchronously) 
     this.props.object.key.map(doSomething); 
    } 
} 

Dies ist relativ sauber, verhindert, dass der Code von zur Laufzeit zu werfen, und zwingen Sie zu erstellen wohldefiniertes Verhalten für semantisch leere, leere oder undefinierte Eingabezustände.