Question

我正在尝试在控制台中打印状态以进行调试但收到错误消息

无法阅读属性＆＃39; petname＆＃39;未定义的

在控制台中打印状态的正确方法是什么？为什么这会将其称为属性？

＆＃13;

export default class App extends Component<{}> {
  constructor(props) {
    super(props)

    this.state = {
      petname: '',
      owner: ''
    };
  }
  
  addPet() {
    console.log("Button Pressed");
    console.log(this.state.petname);
    return (
      //some logic
    );
  }
  
  render() {
    return (
      <View style={styles.container}>
        <View style={styles.inputStyle}>
          <Text>Pet</Text>
          <TextInput onChangeText={petname =>                                 this.setState({petname})} style={{width:100}} />
        </View>
        <View style={styles.inputStyle} >
          <Button title="Add Pet" onPress={this.addPet} />
        </View>
      </View>
    )
  }
}

＆＃13;

Answer 1

您的函数无法访问

this。您可以将this与onPress上的函数绑定，也可以在构造函数中编写以下内容。

this.addPet = this.addPet.bind(this);

比较第一个和第二个选项，第二个选项更好，因为它不会每次都创建新实例。

最佳选择是使用箭头功能（ES6功能）。请考虑以下示例。

addPet = () => {
 // Your awesome logic goes here  
}

Answer 2

此代码应该有效：

<Button title="Add Pet" onPress={this.addPet.bind(this)} />

Answer 3

将函数重写为：

addPet = () => {
    console.log("Button Pressed");
    console.log(this.state.petname);
    return (
      //some logic
    );
  }

如何使用react native在控制台中打印状态？

3 个答案: