Question

通常我们会写

if(num1==""){
do nothing
}else{
do something}

我们如何用React本机语法编写它，下面是我的代码

我已经尝试了很多，但未能弄清楚为什么会给出错误

import * as React from 'react';
import { Text, View, StyleSheet, TextInput, Button, Alert } from 'react-native';
import Constants from 'expo-constants';
import AssetExample from './components/AssetExample';
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  state = {
    num1 : "",
     num2 : "",
     result: ""
  }

  addBtnPressed = () => {
    this.setState({
      if({num1 == "" || num2 == ""}){
        alert('Field Empty')
      }else{
        result: eval(this.state.num1 +"+"+ this.state.num2)
      }
     });
  }
  render() {
    return (
      <View style={styles.container}>
        <TextInput 
          keyboardType={"numeric"}
          placeholder="Enter 1st Number" 
          onChangeText={num1 => this.setState({num1})}/>

        <TextInput 
          keyboardType={"numeric"}
          placeholder="Enter 2nd Number" 
          onChangeText={num2 => this.setState({num2})}/>
        <Button title="ADD" onPress={this.addBtnPressed}/>
         <Text>{this.state.result}</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
});

Answer 1

您不能在if内使用setState语句

addBtnPressed = () => {
    const { num1, num2 } = this.state
    if(num1 == "" || num2 == "") 
        return alert('Field Empty')  
    this.setState({result: eval(this.state.num1 +"+"+ this.state.num2)})
}

Answer 2

您不应在if-else中使用setState条件。

也不要使用eval。从this，

不建议使用eval（），因为它速度慢，不安全并且会使代码不可读和不可维护。

您可以使用parseInt。

addBtnPressed = () => {
    const {num1,num2} = this.state;
    if(num1 === "" || num2 === ""){
        alert('Field Empty')
    }else{
        this.setState({ result: parseInt(num1) + parseInt(num2) }, ()=>console.log(this.state.result))
    }
}

另一种方法是（避免）

addBtnPressed = () => {
    this.setState( prevState => {
      if(prevState.num1 === "" || prevState.num2 === ""){
        alert('Field Empty')
      }
      return { result: parseInt(prevState.num1) + parseInt(prevState.num2) }
    }, () => console.log(this.state.result));
}

详细了解setState。

Answer 3

您正在做的是在调用setState函数时使用if-else调用addBtnPressed函数，并且您不使用语法this.state.num1访问状态变量，而是使用了num1这是导致错误的原因。由于您的问题尚不清楚，但是从您的代码中我发现您需要检查用户是否已输入num1和num2，否则请发出警报。因此您可以在addBtnPressed上进行此操作：

if(this.state.num1 && this.state.num2){ this.setState({ result: parseInt(this.state.num1) + parseInt(this.state.num2) }); }else{ alert('Field Empty'); }

上面的代码简短有趣，可以帮助您完成工作。提醒一下，切勿在setState内使用if和else，如上文dupocas和ravibugal所述。

如何在React Native中检查空条件

3 个答案: