遇到“TypeError：無法讀取未定義的屬性（讀取'num1'）（14）”

我不知道我的代碼有什么問題，但我遇到了這個 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>
        );
    }
}

這是我到目前為止所擁有的，以及一個樣式表。如果您可以發現任何其他錯誤，我會很感激我能得到的所有幫助。謝謝你。

uj5u.com熱心網友回復：

您正在嘗試訪問初始設定時的狀態。這是不可能的。

因此，

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

標籤：反应式 类型错误

上一篇：如何在createSelector函式中封裝邏輯？

下一篇：Reactnavigation引數錯誤“未定義不是評估route.params的物件”