Question

我在ReactNative还很新。我有一个这样的单身人士：

export default class Locker extends Component {

  static data = Locker.data == null ? new Locker() : this.data;

  constructor(props) {
    super(props);
    this.setState ({ username: "" });
    AsyncStorage.getItem('username', (error, result) => { 
      if (result) { this.setState({ username: result }); } 
    });
    this.getUsername = this.getUsername.bind(this);
    this.setUsername = this.setUsername.bind(this);
  }

  getUsername = () => {
    return this.state.username;
  }

  setUsername = (value) => {
    AsyncStorage.setItem('username', value);
    this.setState({ username: value });
  }
}

这是我的主要应用程序

export default class Home extends Component {

  constructor(props) {
    super(props);
    this.showAlert = this.showAlert.bind(this);
  }

  showAlert() {
    Alert.alert(
      'This is an alert',
      'Your saved username is ' + Locker.data.getUsername(),
      [
        {text: 'OK', onPress: console.log("Done")},
      ],
      {cancelable: false},
    );
  }

  render() {
    return(
      <View style={{ span: 1, backgroundColor: "white" }}>
        <Button title="Press me" onPress={ () => this.showAlert() }/>
      </View>
    );
  }
}

运行该应用程序时，我在屏幕上看到了一个预期的按钮。当我点击按钮时，出现错误undefined is not an object (evaluating '_this.state.username')。

为什么？我在某处读到这可能是因为.bind(this)和箭头功能。这就是为什么我在各处添加.bind(this)和箭头功能的原因。但是仍然不能解决问题。如果我访问Home主类方法上的状态，则不会出现此问题。

Answer 1

在构造函数上使用setState()并不是一个好主意，因为react-native会渲染组件及其子组件（这在构造函数中不是正确的事情，因为尚未渲染组件）只需使用this.state = {username: ""};

来启动状态

Answer 2

我认为是因为您未定义：

this.state = {
    username: ""
}

在构造函数方法中，将其替换为super(props)

Answer 3

在构造函数中使用this.state = {username: ""}代替this.setState ({username: ""})。

如果使用箭头功能，则不需要bind(this)

Answer 4

在您的Locker类构造函数中，只需替换此代码

来自

constructor(props) {
    super(props);
    this.setState ({ username: "" });
    AsyncStorage.getItem('username', (error, result) => { 
      if (result) { this.setState({ username: result }); } 
    });
    this.getUsername = this.getUsername.bind(this);
    this.setUsername = this.setUsername.bind(this);
  }

至

constructor(props) {
    super(props);
    this.state={ username: "" }; // add this line instead of that
    AsyncStorage.getItem('username', (error, result) => { 
      if (result) { this.setState({ username: result }); } 
    });
    this.getUsername = this.getUsername.bind(this);
    this.setUsername = this.setUsername.bind(this);
  }

只需替换this.state = { username: "" }

未定义不是单例内this.state的对象

4 个答案: