代码之家 › 专栏 › 技术社区 › CalifroniaKnowsHowToParty

遇到“TypeError:无法读取未定义的属性(读取'num1')(14)”

typeerror react-native

CalifroniaKnowsHowToParty · 技术社区 · 2 年前

我不知道我的代码出了什么问题,但我遇到了这个类型错误。这是我的代码;我正在尝试创建一个带有按钮的简单计算器,但代码尚未完成。

import React, { Component } from 'react';
import { AppRegistry, Text, View, StyleSheet, TextInput, TouchableHighlight, Dimensions } from 'react-native';
import Constants from 'expo-constants';

let deviceHeight = Dimensions.get('window').height;
let deviceWidth = Dimensions.get('window').width;

export default class App extends Component {
    
    state = {
        num1: 0,
        num2: 0,
        operation: '+',
        answer: Number(this.state.num1) + Number(this.state.num2)
    };

错误发生在第14行: answer: Number(this.state.num1) + Number(this.state.num2)

    plus = () => {
        this.setState({
            operation: '+'
        }),
        this.setState({
            answer: Number(this.state.num1) + Number(this.state.num2)
        })
    };
    
    minus = () => {
        this.setState({
            operation: '-'
        }),
        this.setState({
            answer: Number(this.state.num1) - Number(this.state.num2)
        })
    };
    
    multiply = () => {
        this.setState({
            operation: 'x'
        }),
        this.setState({
            answer: Number(this.state.num1) * Number(this.state.num2)
        })
    };
    
    divide = () => {
        this.setState({
            operation: '/'
        }),
        this.setState({
            answer: Number(this.state.num1) / Number(this.state.num2)
        })
    };
    
    render() {
        return (
            <View style={styles.container}>
                <Text style={styles.title}>
                    Calculator
                </Text>
                <View style={styles.textInputContainer}>
                    <TextInput style={styles.textInput}
                        keyboardType = 'numeric'
                        onChangeText={(num1) => this.setState({num1})}
                        value={this.state.num1}
                    />
                    
                    <Text style={styles.textInput}>
                        {this.state.operation}
                    </Text>
                    
                    <TextInput style={styles.textInput}
                        keyboardType = 'numeric'
                        onChangeText={(num2) => this.setState({num2})}
                        value={this.state.num2}
                    />
                </View>
                
                <View style={styles.textInputContainer}>
                    
                    <TouchableHighlight
                        style={styles.button}
                        onPress={this.plus}
                    >
                        <Text style={styles.title}>
                            +
                        </Text>
                    </TouchableHighlight>
                </View>
            </View>
        );
    }
}

这是我到目前为止所拥有的,以及一个样式表。如果你能发现任何其他错误,我将非常感谢你的帮助。非常感谢。

1 回复 | 直到 2 年前

David Scholz 2 年前

您正在尝试访问初始设置时的状态。这是不可能的。

因此

state = {
        num1: 0,
        num2: 0,
        operation: '+',
        answer: Number(this.state.num1) + Number(this.state.num2)
    };

不起作用。因为这是初始状态,所以可以设置 answer 归零。

state = {
        num1: 0,
        num2: 0,
        operation: '+',
        answer: 0
    };

改变 答复 之后才有可能。

代码中还有一个可能的问题。将状态设置为不包含对象定义属性的新对象。此外,您还为设置设置设置了两次状态 答复 和 operation .这将触发两个重新加载,这是不必要的。您可以使用 spread-syntax 并覆盖要覆盖的状态的值。

multiply = () => {
        this.setState(previousState => ({
            ...previousState,
            operation: 'x',
            answer: previousState.num1 * previousState.num2
        })),
    };