在 render() 之前更新 var [React Native]

Question

对于一个学习项目，我目前正在开发一个移动应用程序，用于在本机 React 中读取 QR 码。扫描 QR 码后，我会将其 id 保存在历史记录中。

当我单击此 ID 时，我想打开一个包含有关此 QR 码的信息的页面（由 API 休息检索）。但是当我选择一个ID时，得到的信息是之前二维码的信息。

我创建了一个更新信息的按钮，但我希望它是正确的。

谢谢，我附上了我的代码和我的项目的 git。

吉特：https ://github.com/davidsio/react

import React, { Component } from 'react';

import { StyleSheet, View, Text} from 'react-native';

import QRCode from 'react-native-qrcode-svg';

let getJSON = function(url, callback) {

  var xhr = new XMLHttpRequest();

  xhr.open('GET', url, true);

  xhr.responseType = 'json';

  xhr.onload = function() {

    var status = xhr.status;

    if (status === 200) {

      callback(null, xhr.response);

    } else {

      callback(status, xhr.response);

    }

  };

  xhr.send();

};

export default class Informations extends Component {

  static navigationOptions = {

    title: 'Informations',

    headerBackTitle: 'Retour',

    headerStyle: {

      backgroundColor: '#557aca',

      //Sets Header color

    },

    headerTintColor: '#fff',

    //Sets Header text color

    headerTitleStyle: {

      fontWeight: 'bold',

      //Sets Header text style

    },

    //Sets Header text of Status Bar

  };

  render() {

    const { navigate } = this.props.navigation;

    const { params } = this.props.navigation.state;

    const itemValue = params ? params.itemValue : null;

    const itemId = params ? params.itemId : null;

    getJSON('http://elarnes.fr/get_qrcode.php?idQrCode=' + JSON.stringify(itemValue).replace(/['"]+/g, '').split(';')[1],

    function(err, data) {

      if (err !== null) {

        console.log('Something went wrong: ' + err);

      } else {

        tabCode = data[0]

      }

    });

Answer 1

你能试试这个：constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; loaded: false,&nbsp; &nbsp; &nbsp; &nbsp; code: []&nbsp; &nbsp; };}componentDidMount() {&nbsp; &nbsp; getJSON('http://elarnes.fr/get_qrcode.php?idQrCode=' + JSON.stringify(itemValue).replace(/['"]+/g, '').split(';')[1],&nbsp; &nbsp; &nbsp; &nbsp; (err, data) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (err !== null) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('Something went wrong: ' + err);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; code: data[0],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loaded: true&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; );}componentDidUpdate(nextProps) {&nbsp; &nbsp; //this will triggered when the props changes - not needed for this}render() {&nbsp; &nbsp; if (!this.state.loaded)&nbsp; &nbsp; &nbsp; &nbsp; return <View />&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; &nbsp; <View style={styles.container}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <QRCode&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {tabCode["code"]}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {tabCode["description"]}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Text>&nbsp; &nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; )}

Answer 2

import React, { Component } from 'react';import { StyleSheet, View, Text, Button} from 'react-native';import QRCode from 'react-native-qrcode-svg';let code = [];let getJSON = function(url, callback) {&nbsp; var xhr = new XMLHttpRequest();&nbsp; xhr.open('GET', url, true);&nbsp; xhr.responseType = 'json';&nbsp; xhr.onload = function() {&nbsp; &nbsp; var status = xhr.status;&nbsp; &nbsp; if (status === 200) {&nbsp; &nbsp; &nbsp; callback(null, xhr.response);&nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; callback(status, xhr.response);&nbsp; &nbsp; }&nbsp; };&nbsp; xhr.send();};export default class Informations extends Component {&nbsp; static navigationOptions = {&nbsp; &nbsp; title: 'Informations',&nbsp; &nbsp; headerBackTitle: 'Retour',&nbsp; &nbsp; headerStyle: {&nbsp; &nbsp; &nbsp; backgroundColor: '#557aca',&nbsp; &nbsp; &nbsp; //Sets Header color&nbsp; &nbsp; },&nbsp; &nbsp; headerTintColor: '#fff',&nbsp; &nbsp; //Sets Header text color&nbsp; &nbsp; headerTitleStyle: {&nbsp; &nbsp; &nbsp; fontWeight: 'bold',&nbsp; &nbsp; &nbsp; //Sets Header text style&nbsp; &nbsp; },&nbsp; &nbsp; //Sets Header text of Status Bar&nbsp; };&nbsp; constructor(props) {&nbsp; &nbsp; super(props);&nbsp; &nbsp; this.state = {&nbsp; &nbsp; &nbsp; &nbsp; loaded: false,&nbsp; &nbsp; &nbsp; &nbsp; code: []&nbsp; &nbsp; };&nbsp; }&nbsp; componentDidMount() {&nbsp; &nbsp; const { params } = this.props.navigation.state;&nbsp; &nbsp; const itemValue = params ? params.itemValue : null;&nbsp; &nbsp; const itemId = params ? params.itemId : null;&nbsp; &nbsp; getJSON('http://elarnes.fr/get_qrcode.php?idQrCode=' + JSON.stringify(itemValue).replace(/['"]+/g, '').split(';')[1],&nbsp; &nbsp; &nbsp; &nbsp; (err, data) => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; if (err !== null) {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; console.log('Something went wrong: ' + err);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; } else {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; this.setState({&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; code: data[0],&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; loaded: true,&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; })&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; &nbsp; &nbsp; }&nbsp; &nbsp; );&nbsp; }&nbsp; componentDidUpdate(nextProps) {&nbsp; &nbsp; //this will triggered when the props changes - not needed for this&nbsp; }&nbsp; render() {&nbsp; &nbsp; if (!this.state.loaded)&nbsp; &nbsp; &nbsp; &nbsp; return <View />&nbsp; &nbsp; return (&nbsp; &nbsp; &nbsp; <View style={styles.container}>&nbsp; &nbsp; &nbsp; &nbsp; <QRCode&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; value={"sdbwfhjk"}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; size={250}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; color="black"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; backgroundColor="white"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; logoSize={30}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; logoMargin={2}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; logoBorderRadius={15}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; logoBackgroundColor="yellow"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; />&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.code["code"]}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {this.state.code["description"]}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Text>&nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; );&nbsp; }}const styles = StyleSheet.create({&nbsp; container: {&nbsp; &nbsp; flex: 1,&nbsp; &nbsp; backgroundColor: 'white',&nbsp; &nbsp; justifyContent: 'center',&nbsp; &nbsp; alignItems: 'center'&nbsp; },});