Question

正在使用expo在Android上对其进行测试。 randomNumber属性可以通过render()方法进行读写（我已经在return语句之前对警报和set操作进行了测试），但是由于某种原因，它是未定义的，因此不能读取或设置方法newNumber()中的内容。

“旧”和“设置”警报显示undefined，“新”警报显示预期的随机数。有时不会显示警报。我假设长时间接触会很快关闭它。警报似乎是异步的，并且以随机顺序显示，但是应用程序中显示的数字永远不会改变，因此我很确定这不是问题。这可能很明显，但我感到困惑

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

export default class App extends React.Component {

    randomNumber = 9;

    render() {

        return (
            <View style={styles.container}>
                <Text>{this.randomNumber}</Text>
                <Button onPress={this.newNumber} title='New Random Number'/>
            </View>
        );
    }

    newNumber() {
        var number = Math.floor((Math.random() * 10));
        Alert.alert('Old: ' + this.randomNumber);
        Alert.alert('New: ' + number);
        this.randomNumber = number;
        Alert.alert('Set: ' + this.randomNumber);

    }

}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        backgroundColor: '#fff',
        alignItems: 'center',
        justifyContent: 'center',
    },
});

Answer 1

更改实例变量时，不会重新加载视图。您必须使用状态变量重新加载视图。

示例：

constructor() {
     super();
     this.state = { randomNumber:9 };
}

 render() {

    return (
        <View style={styles.container}>
            <Text>{this.state.randomNumber}</Text>
            <Button onPress={this.newNumber.bind(this)} title='New Random Number'/>
        </View>
    );
}

 newNumber() {
        var number = Math.floor((Math.random() * 10));
        Alert.alert('Old: ' + this.randomNumber);
        Alert.alert('New: ' + number);
        this.setState({randomNumber: number});
        Alert.alert('Set: ' + number);
  }

无法使用此方法从内部方法访问React Native App对象的属性

1 个答案: