React Native开发计算器 已定义handleInput仍报找不到变量错误

can't find variable handleInput是作用域嵌套错误+括号不配对导致的。你写的handleInput方法根本不在CalculatorScreen组件的顶层作用域里，而是被错误嵌套在内部的Calculator函数中，JSX渲染时调用handleInput自然找不到对应变量。

• 括号配对错误：你定义的Calculator计算函数写完if/else逻辑后，没有添加闭合大括号}，直接在函数内部开始写handleInput的定义，导致handleInput成了Calculator函数的私有内部方法，外层作用域完全访问不到。
• 命名冲突：自定义计算函数和组件名同名（都叫Calculator），很容易引发作用域判断混淆。
• 边界逻辑缺失：计算逻辑没做空值判断，首次进入页面currNumber为空时点击等号，eval执行空字符串会直接抛错。

调整两个函数的层级，补全缺失的闭合括号，修正命名即可，核心修改部分代码如下，其余原有视图代码完全不用动：

const CalculatorScreen = (props) => {
    const [currNumber, setCurrNumber] = useState('');
    const [lastNumber, setLastNumber] = useState('');
    const buttons = ['C', 'DEL', '/', 7, 8, 9, '*', 4, 5, 6, '-', 1, 2, 3, '+', 0, '.', '=']

    // 计算函数改名避免和组件重名，放到组件顶层作用域，补全闭合
    const calculateResult = () => {
        // 新增空值拦截，避免空串执行eval报错
        if (!currNumber) return
        const lastChar = currNumber[currNumber.length - 1]
        if (['/', '*', '-', '+', '.'].includes(lastChar)) return
        const result = eval(currNumber).toString();
        setCurrNumber(result)
    }

    // handleInput放到组件顶层，和JSX同层级，不要嵌套在其他函数内
    const handleInput = (buttonPressed) =>{
        if(['+', '-', '*', '/'].includes(buttonPressed)) {
            Vibration.vibrate(35);
            setCurrNumber(currNumber + buttonPressed)
            return
        }else if ([1,2,3,4,5,6,7,8,9,0,'.'].includes(buttonPressed)) {
            Vibration.vibrate(35);
        }
        switch(buttonPressed) {
            case 'DEL':
                Vibration.vibrate(35);
                setCurrNumber(currNumber.substring(0, currNumber.length - 1))
                return
            case 'C':
                Vibration.vibrate(35);
                setLastNumber('')
                setCurrNumber('')
                return
            case '=':
                Vibration.vibrate(35);
                setLastNumber(currNumber + '=')
                calculateResult()
                return
        }
        setCurrNumber(currNumber + buttonPressed)
    }

    // 以下return部分的JSX代码完全保留你原来的写法即可，不需要修改
    return (
        <View>
            <View style = {styles.results}>
                    <Text style={styles.historyText}>{lastNumber}</Text>
                    <Text style={styles.resultText}>{currNumber}</Text>
            </View>
            <View style={styles.buttons}>
                {/* 你原来的buttons.map渲染逻辑保持不变 */}
            </View>
        </View>
    )
}

• 函数组件内部定义的事件处理方法、工具方法，必须和return的JSX在同一个作用域层级，不能嵌套在其他函数内部，否则渲染时无法访问。
• 写代码时每输入一个左大括号{，立刻补一个对应的右大括号}，再往括号内填充逻辑，从根源上避免括号不配对导致的作用域错乱。
• 普通函数、事件处理方法用小驼峰命名，React组件用大驼峰命名，不要重名，减少不必要的混淆。

内容的提问来源于stack exchange，提问作者shutu