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

Question

对于一个学习项目，我目前正在开发一个移动应用程序，用于在本机 React 中读取 QR 码。扫描 QR 码后，我会将其 id 保存在历史记录中。当我单击此 ID 时，我想打开一个包含有关此 QR 码的信息的页面（由 API 休息检索）。但是当我选择一个ID时，得到的信息是之前二维码的信息。我创建了一个更新信息的按钮，但我希望它是正确的。谢谢，我附上了我的代码和我的项目的 git。吉特：https ://github.com/davidsio/reactimport 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) {

    super(props);

    this.state = {

        loaded: false,

        code: []

    };

}

componentDidMount() {

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

        (err, data) => {

            if (err !== null) {

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

            } else {

                this.setState({

                    code: data[0],

                    loaded: true

                })

            }

        }

    );

}

componentDidUpdate(nextProps) {

    //this will triggered when the props changes - not needed for this

}

render() {

    if (!this.state.loaded)

        return <View />

    return (

        <View style={styles.container}>

            <QRCode

            />

            <Text>

                {tabCode["code"]}

                {tabCode["description"]}

            </Text>

        </View>

    )

}

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

  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

  };

  constructor(props) {

    super(props);

    this.state = {

        loaded: false,

        code: []

    };

  }

  componentDidMount() {

    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],

        (err, data) => {

            if (err !== null) {

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

            } else {

                this.setState({

                  code: data[0],

                  loaded: true,

                })

            }

        }

    );

  }

  componentDidUpdate(nextProps) {

    //this will triggered when the props changes - not needed for this

  }

  render() {

    if (!this.state.loaded)

        return <View />

    return (

      <View style={styles.container}>

        <QRCode

                  value={"sdbwfhjk"}

                  size={250}

                  color="black"

                  backgroundColor="white"

                  logoSize={30}

                  logoMargin={2}

                  logoBorderRadius={15}

                  logoBackgroundColor="yellow"

                />

                <Text>

                {this.state.code["code"]}

                {this.state.code["description"]}

                </Text>

      </View>

    );

  }

}

const styles = StyleSheet.create({

  container: {

    flex: 1,

    backgroundColor: 'white',

    justifyContent: 'center',

    alignItems: 'center'

  },

});