Reagieren nativer: Dynamische Inhalte - Render-Funktion aktualisiert die Ansicht

Question

ich den folgenden Konstruktor

constructor(props){ 
    super(props); 
    this.renderConversations = this.renderConversations.bind(this); 
    this.startConversation = this.startConversation.bind(this); 
    this.state = { 
     conversationArray: [] 
    } 

In Funktion startConversation ich aktualisieren, um die Zustandsgröße haben.

startConversation(conversationObject) { 
    let currentResponse = conversationObject["responses"]; 
    let thisResponse = currentResponse[Math.floor(Math.random() * currentResponse.length)]; 

    this.state.conversationArray.push(thisResponse); 
    this.renderConversations(); 

    } 

In der Funktion renderConversations, mache ich folgendes:

renderConversations(){ 
    let conversationContent = this.state.conversationArray.map((conv, i) => { 
     return <View key={i} style={[globalStyle.conversationContainer,globalStyle.shadow]}><Text style= {globalStyle.conversationText}>{ conv }</Text></View>        
    }) 
    return conversationContent 
    } 

schließlich in der Funktion machen, ich {this.renderConversations()} machen. Jetzt wird startConversation bei einem Tastendruck ausgelöst. Aber jedes Mal wenn ich die Statusvariable aktualisiere, wird die Komponente nicht aktualisiert. Was mache ich falsch?

Answer 1

Per DOC:

mutieren Nie this.state direkt verwenden setState dafür, Treat this.state, als ob es unveränderlich waren.

---

Sie den Zustand in einer falschen Weise zu aktualisieren, „mutiert niemals der Zustandswert immer direkt setState, sie zu aktualisieren verwenden“. Wenn wir setState verwenden, reagiere automatisch die Komponente mit dem Aktualisierungsstatuswert erneut.

schreibt es so:

this.setState(prevState => ({ 
    conversationArray: [...prevState.conversationArray, thisResponse] 
})) 

Ein weiteres Problem ist setState async ist, können wir den Update-Zustandswert gleich nach dem setState nicht erwarten, so Callback-Methode von setState verwenden und renderConversations innen so nennen.

So:

this.setState(prevState => ({...}),() => this.renderConversations()) 

Lesen Sie diese Antwort für mehr Details über async behaviour of setState.

Vorschlag: Alle UI-Logik sollte in Render-Methode sein, also, wenn Sie UI dynamisch erstellen möchten rufen Sie das renderConversations von Render.