Running into "TypeError: Cannot read properties of undefined (reading 'num1') (14)"

Question

我不知道我的代码有什么问题，但我运行遇到了这个 TypeError。这是我的代码；我正在尝试创建一个带按钮的简单计算器，但代码尚未完成。

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

这是我目前所拥有的，还有一个样式表。如果您发现任何其他错误，我将不胜感激。谢谢。

Answer 1

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

因此，

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

不起作用。由于这是初始状态，您可以将 answer 设置为零。

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

之后可以更改 answer。

您的代码中可能还有另一个问题。您将状态设置为不包含对象定义属性的新对象。此外，您为设置 answer 和 operation 设置了两次状态。这将触发两次重新渲染，这是不必要的。您可以使用 spread-syntax 一次设置所有内容，并覆盖您要覆盖的状态的值。

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

Running into "TypeError: Cannot read properties of undefined (reading 'num1') (14)"

Running into "TypeError: Cannot read properties of undefined (reading 'num1') (14)"

react-native

typeerror