react-native
Staat

Syntaxis

• void setState (functie | object nextState, [functie callback])

setstate

Als u de weergave in uw toepassing wilt wijzigen, kunt u setState gebruiken. setState uw component en alle onderliggende componenten opnieuw setState . setState voert een ondiepe samenvoeging uit tussen de nieuwe en vorige status en activeert een herrendering van de component.

setState neemt een sleutelwaardeobject of een functie die een sleutelwaardeobject retourneert

Sleutel / waarde-object

this.setState({myKey: 'myValue'});

Functie

Het gebruik van een functie is handig voor het bijwerken van een waarde op basis van de bestaande status of rekwisieten.

this.setState((previousState, currentProps) => {
    return {
        myInteger: previousState.myInteger+1
    }
})

U kunt ook een optionele callback doorgeven aan setState die wordt setState wanneer de component opnieuw wordt gerenderd met de nieuwe status.

this.setState({myKey: 'myValue'}, () => {
    // Component has re-rendered... do something amazing!
));

Volledig voorbeeld

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, Text, View, TouchableOpacity } from 'react-native';

export default class MyParentComponent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      myInteger: 0
    }

  }
  getRandomInteger() {
    const randomInt = Math.floor(Math.random()*100);

    this.setState({
      myInteger: randomInt
    });

  }
  incrementInteger() {
    
    this.setState((previousState, currentProps) => {
      return {
        myInteger: previousState.myInteger+1
      }
    });

  }
  render() {

    return <View style={styles.container}>
      
      <Text>Parent Component Integer: {this.state.myInteger}</Text>

      <MyChildComponent myInteger={this.state.myInteger} />

      <Button label="Get Random Integer" onPress={this.getRandomInteger.bind(this)} />
      <Button label="Increment Integer" onPress={this.incrementInteger.bind(this)} />

    </View>

  }
}

export default class MyChildComponent extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    
    // this will get updated when "MyParentComponent" state changes
    return <View>
      <Text>Child Component Integer: {this.props.myInteger}</Text>
    </View>
    
  }
}

export default class Button extends Component {
  constructor(props) {
    super(props);
  }
  render() {

    return <TouchableOpacity onPress={this.props.onPress}>
        <View style={styles.button}>
          <Text style={styles.buttonText}>{this.props.label}</Text>
        </View>
      </TouchableOpacity>
    
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  button: {
    backgroundColor: '#444',
    padding: 10, 
    marginTop: 10
  },
  buttonText: {
    color: '#fff'
  }
});

AppRegistry.registerComponent('MyApp', () => MyParentComponent);

Initialiseer staat

U moet de status binnen de constructorfunctie van uw component als volgt initialiseren:

export default class MyComponent extends Component {
  constructor(props) {
    super(props);
    
    this.state = {
      myInteger: 0
    }
  }
  render() {
    return  (
      <View>
        <Text>Integer: {this.state.myInteger}</Text>
      </View>
    )
  }
}

Met setState kan men de weergave bijwerken.