Was ist der richtige Weg, Requisiten in Redux/React Komponenten zu verändern?

Question

Ich habe ein Array, das als String kommt (und kann es jetzt nicht ändern). Ich empfange den String und muss JSON.parse() über ein Array mit String-Namen ausführen, um es wieder zu einem Array zu machen. Ich kann es nicht in der ComponentDidMount-Funktion tun, da es keine bewährte Methode ist, eine Zustandskomponente in Redux zu haben. Ich könnte es in der Render-Funktion machen, aber soweit es mich betrifft, ist es auch nicht eine bewährte Methode, Werte dort zu mutieren.

render() { 
if (typeof this.props.detectedPersonListJson == 'string'){ 
     var array= JSON.parse(this.props.detectedPersonListJson); 
    } 
return (
     <div> 
    array.map(...) 
</div> 

Wie kann ich Requisiten-Mutation in Reduxs Präsentationskomponente verwalten? Danke!

Answer 1

Erstens würde ich definitiv nicht die Mutation in der Render-Funktion tun, da es viel genannt werden wird. Was ich vorschlagen würde ist lesen Sie die ursprünglichen Requisiten in ComponentDidMount, wo Sie sie entsprechend mutieren und speichern sie im internen Zustand. Wenn sich der Wert danach ändert, würde ich empfehlen, die gleiche Mutation in ComponentWillReceiveProps durchzuführen. Ich glaube auch nicht, dass es eine sehr schlechte Übung ist, die gegebenen Requisiten zu mutieren, um sie zu benutzen. Versuchen Sie einfach, die Mutationen auf ein Minimum zu beschränken und sie von der Renderfunktion fernzuhalten.

Answer 2

Wenn Sie redux verwenden, gehe ich davon aus würden Sie bereits eine mapStateToProps Funktion verwenden, können Sie es dort analysieren und an die Komponente

function mapStateToProps(state) { 
    var array; 
    if (typeof state.detectedPersonListJson == 'string'){ 
     array= JSON.parse(state.detectedPersonListJson); 
    } 
    return { 
     detectedPersonListJson: array 
    } 

} 

Ansonsten können Sie die Stütze speichern Reagieren zur Verfügung stellen als Statusvariable, für die Sie in componentWillReceiveProps und componentWillMount/componentDidMount Lifecycle-Funktionen analysieren und setzen müssen, da componentWillMount nur einmal aufgerufen wird und componentWillReceiveProps bei jedem Render danach aufgerufen wird.