Elegante ES6 Möglichkeit, den Status in React zu aktualisieren

Question

Die Syntax zum Aktualisieren von state in React hat sich sehr geändert. Ich versuche, den einfachsten und elegantesten Weg zu finden, um es zu initiieren und zu aktualisieren.

diesen RN Code Got:

const { quotes } = require('./quotes.json') 

class QuoteScreen extends Component { 
    state = { 
    QuoteIndex: 0 
    } 
    render() { 
    return (
     <Image ...> 
     <View ...> 
      ... 
      <ButtonNextQuote 
      onPress={() => { 
       this.setState((prevState, props) => { 
       return { 
        QuoteIndex: (prevState.QuoteIndex + 1) % (quotes.length - 1) 
       } 
       }) 
      }} 
      /> 
     </View> 
     </Image> 
    ) 
    } 
} 

Wäre es möglich, die Aktualisierung der state im onPress zu reduzieren?

Möchten vermeiden, eine anonyme Funktion zweimal aufzurufen, aber einen Handler nicht verweisen und binden möchten. Ich möchte auch die Verwendung der return ..

Answer 1

Hier ist, wie ich das tun würde. Ich habe object destructuring im ersten Argument des Rückrufs von SetState (prevState) verwendet, und ich habe aus Leistungsgründen eine separate Funktion anstelle eines anonymen verwendet. Beachten Sie auch, dass ich die Funktion nicht manuell an this binden musste, da ich eine Pfeilfunktion dafür verwendet habe.

const { quotes } = require('./quotes.json') 
 

 
class QuoteScreen extends Component { 
 
    state = { 
 
    QuoteIndex: 0 
 
    } 
 

 
    handleUpdateState =() => { 
 
    this.setState(({ QuoteIndex }) => ({ 
 
     QuoteIndex: (QuoteIndex + 1) % (quotes.length - 1) 
 
    })); 
 
    } 
 

 
    render() { 
 
    return (
 
     <Image ...> 
 
     <View ...> 
 
      ... 
 
      <ButtonNextQuote 
 
      onPress={this.handleUpdateState} 
 
      /> 
 
     </View> 
 
     </Image> 
 
    ) 
 
    } 
 
}

Answer 2

vermeiden Ich würde die Update-Funktion in einer Variablen außerhalb der Klasse, z.

const newState = ({QuoteIndex: i}) => ({QuoteIndex: (i + 1) % nQuotes}); 

(natürlich können Sie wählen, um die Funktion in irgendeiner Weise Sie mögen, vielleicht „Prägnanz“ zu definieren, ist nicht so wichtig für Sie mehr, wenn es nicht inlined ist)

Und dann können Sie rufen Sie einfach this.setState(newState):

onPress={() => this.setState(newState)} 

Answer 3

denke ich, eine beliebte und gute Möglichkeit, dies zu tun ist, um

1. Use „funktionelle setState“ durch einen Rückruf this.setState bietet einige seltsame Fälle im Batch zu vermeiden Zustandsaktualisierungen

2. "Deklarieren Sie Zustandsänderungen getrennt von den Komponentenklassen" so th bei den Funktionen, die den neuen Zustand bekommen, können diese separat wiederverwendet und getestet werden.

Check this article für eine große Erklärung dieses Ansatzes Tweets von Dan Abramov mit

Beispiel:

const { quotes } = require('./quotes.json') 

// keep pure function outside component to be reusable, testable 
const getQuoteIndex = ({ QuoteIndex }) => ({ 
    QuoteIndex: (QuoteIndex + 1) % (quotes.length - 1) 
}) 

class QuoteScreen extends Component { 
    state = { 
    QuoteIndex: 0 
    } 
    // arrow function will take care of this binding 
    handlePress =() => { this.setState(getQuoteIndex) } 
    render() { 
    return (
     <Image ...> 
     <View ...> 
      ... 
      <ButtonNextQuote 
      onPress={this.handlePress} 
      /> 
     </View> 
     </Image> 
    ) 
    } 
} 

Answer 4

Sie wollen würde eine Neudefinition der Event-Handler render läuft jedes Mal zu vermeiden, wie andere haben gesagt. Ich ziehe es um ein Objekt zu setState statt einer Callback-Funktion zu übergeben:

_handlePress =() => { 
    this.setState({ 
    QuoteIndex: (this.state.QuoteIndex + 1) % (quotes.length - 1) 
    }); 
}; 

onPress={this._handlePress} 

Dies ist einfacher zu lesen, weil es explizit ist, wo der Staat herkommt. Außerdem müssen Sie keine zusätzlichen Rückruffunktionen im Auge behalten.