react-native
stat

Syntax

• void setState (funktion | objekt nextState, [function callback])

sets

För att ändra vy i din applikation kan du använda setState - detta kommer att återge din komponent och alla dess underordnade komponenter. setState utför en grund sammanslagning mellan det nya och tidigare tillståndet och utlöser en återgivning av komponenten.

setState tar antingen ett nyckelvärdeobjekt eller en funktion som returnerar ett nyckelvärdeobjekt

Nyckel-värdeobjekt

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

Fungera

Att använda en funktion är användbar för att uppdatera ett värde baserat på befintligt tillstånd eller rekvisita.

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

Du kan också skicka en valfri återuppringning till setState som kommer att avfyras när komponenten har återgivits med det nya tillståndet.

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

Fullständigt exempel

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);

Initiera staten

Du bör initiera tillstånd inuti konstruktionsfunktionen för din komponent så här:

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

Med setState kan man uppdatera vyn.