React Native中TextInput输入后计算器输出undefined如何解决

问题原因及修复方案 #

你的代码存在以下几处错误：

• 等号按钮点击事件中，调用computation方法时没有添加括号，导致将函数本身直接赋值给了result，而非函数执行后的计算结果
• computation方法内读取状态的逻辑错误：operator、firstNumber、secondNumber都存储在state中，需要通过this.state.xxx的格式读取，不能直接使用变量名或者this.operator读取
• 加法判断的字符串引号未闭合，存在语法漏洞
• TextInput输出的内容是字符串类型，需要先转换为数字再做运算，否则加法操作会变成字符串拼接
• React中不允许直接修改this.state的值，计算方法只需要返回计算结果即可，由外层setState统一更新状态

修正后的完整代码 #

export default class calculator extends Component {
  state = {
    firstNumber: "",
    secondNumber: "",
    operator: "",
    result: "",
  };

  computation() {
    // 从state读取值并转成数字
    const num1 = Number(this.state.firstNumber)
    const num2 = Number(this.state.secondNumber)
    const op = this.state.operator

    // 先判断输入是否为合法数字
    if (isNaN(num1) || isNaN(num2)) {
      return "Not a number!"
    }

    if (op === "+") {
      return num1 + num2;
    } else if (op === "-") {
      return num1 - num2;
    } else if (op === "*") {
      return num1 * num2;
    } else if (op === "/") {
      // 额外判断除数不能为0
      return num2 === 0 ? "除数不能为0" : num1 / num2;
    } else {
      return "请输入合法运算符";
    }
  }

  render() {
    return (
      <View>
        <Text>First number</Text>
        <TextInput
          style={styles.input}
          onChangeText={(val) => {
            this.setState({ firstNumber: val });
          }}
          keyboardType="numeric" // 限定数字键盘，优化体验
        />

        <Text>Operation</Text>
        <TextInput
          style={styles.input}
          onChangeText={(val) => {
            this.setState({ operator: val });
          }}
        />

        <Text>Second number</Text>
        <TextInput
          style={styles.input}
          onChangeText={(val) => {
            this.setState({ secondNumber: val });
          }}
          keyboardType="numeric" // 限定数字键盘，优化体验
        />

        <Button
          title="="
          onPress={() => {
            // 调用计算方法拿到结果后更新state
            this.setState({ result: this.computation() });
          }}
        />

        <Text>Output: {this.state.result}</Text>

        <Text>History:</Text>
      </View>
    );
  }
}

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