Javascript 在呈现（）之前更新变量[本机反应]

在一个研究项目中，我目前正在开发一个手机应用程序，用于以本地语言读取二维码。扫描二维码后，我会将其id保存在历史记录中

当我点击这个id时，我想打开一个页面，其中包含API rest检索到的这个二维码的信息。 但当我选择一个ID时，获得的信息是以前的二维码

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

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

吉特：

你能试试这个吗

构造器{ 超级作物； 此.state={ 加载：false， 代码：[] }; } 组件安装{ getJSON'http://elarnes.fr/get_qrcode.php?idQrCode='+JSON.stringifyitemValue.replace/[']+/g.split'；'[1]， 错误，数据=>{ 如果错误！==null{ console.log“出错：”+错误； }否则{ 这是我的国家{ 代码：数据[0]， 加载：正确 } } } ; } componentDidUpdatenextProps{ //这将在道具更改时触发-此操作不需要 } 渲染{ 如果！this.state.loaded 回来 回来 {tabCode[code]} {tabCode[description]} }

---

设置渲染中的状态？最好使用componentDidMount、possibley和componentDidUpdate声明渲染函数应该是纯的，这意味着它不会修改组件state@Finki谢谢你的帮助，我尝试了你的代码，但我有一个错误“this.setState不是函数”。当我搜索时，我看到了componentDidMount&Update，但我不明白它是如何工作的。我是一个新手，请仁慈一点。提前谢谢。@Davi我更新了我的答案，让我知道该答案是否适用于you@Finki谢谢你的工作，我在回答中发布了我的最终代码。你可以使用componentDidMount和componentDidUpdate，可以找到一个例子，第二个例子使用类组件。您当前期望异步结果在同步代码中可用，即使您正确地执行了该操作，也必须在呈现中设置状态，这是一个

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

    return (
      <View style={styles.container}>
        <QRCode
                  value={JSON.stringify(itemValue).replace(/['"]+/g, '')}
                  size={250}
                  color="black"
                  backgroundColor="white"
                  logoSize={30}
                  logoMargin={2}
                  logoBorderRadius={15}
                  logoBackgroundColor="yellow"
                />
                <Text>

                {tabCode["code"]}
                {tabCode["description"]}

                </Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
    justifyContent: 'center',
    alignItems: 'center'

  },
});

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'

  },
});