warum ist slice() verändert den Zustand, wenn in einer Funktion

Question

Ich habe die folgende Funktion, Listen = [] beim Start verwendet:

handleAddList(s) { 

    var temp = this.state.lists.slice(); 
    temp.push(s); 
    console.log(temp); 
    this.setState({lists: temp},console.log(this.state.lists)); 
} 

warum die erste console.log den Wert s zurück, aber die zweites console.log gibt []?

auch, warum, wenn ich Scheibe() entferne, zeigen beide console.logs jetzt den Wert von s?

Answer 1

Das zweite Konsolenprotokoll gibt [] zurück, da es noch nicht festgelegt wurde, da Aufrufe von SetState asynchron sind. Wenn Sie .slice() entfernen, erstellen Sie einen Verweis auf this.state.lists und mutieren direkt, was nicht asynchron ist. Der mutierende Zustand sollte jedoch niemals direkt ausgeführt werden.

Verwenden Sie stattdessen .slice(), um Ihren Status zu klonen, dann mutieren Sie den Klon und setState nach Bedarf. Wenn Sie den Status anzeigen möchten, sollten Sie react-devtools verwenden.