Question

我有SignUp.js文件。当我单击“注册”按钮时，我重定向到主页，但显示警告。是什么引起此警告，以及正确修复的最佳方法是什么。

警告：无法在已卸载的设备上调用setState（或forceUpdate）零件。这是空操作，但表示您的内存泄漏应用。要修复，请取消所有订阅和异步任务在componentWillUnmount方法中。

import ...

const INITIAL_STATE = {
  username: "",
  email: "",
  passwordOne: "",
  passwordTwo: "",
  errorMessage: null
};

export default class Signup extends Component<{}> {
  constructor(props) {
    super(props);
    this.state = { ...INITIAL_STATE };
  }


  handleSignUp = () => {
    const { username, email, passwordOne } = this.state;
    const { history } = this.props;
    auth.doCreateUserWithEmailAndPassword(email, passwordOne)
      .then(authUser => {
        // Create a user in your own accessible Firebase Database too
        db.doCreateUser(authUser.user.uid, username, email)
          .then(() => {
            this.setState({ ...INITIAL_STATE });
            this.props.navigation.navigate("MainScreenNavigator");
          })
          .catch(error => this.setState({ errorMessage: error.message }));
      })
      .catch(error => this.setState({ errorMessage: error.message }));
  };

  goBack() {
    Actions.pop();
  }

  render() {
    const {
      username,
      email,
      passwordOne,
      passwordTwo,
      errorMessage
    } = this.state;

    const isInvalid =
      passwordOne !== passwordTwo ||
      passwordOne === "" ||
      email === "" ||
      username === "";
    const display = isInvalid ? "none" : "flex";

    return (
      <View style={styles.container}>

        <KeyboardAvoidingView>
          <TextInput.../>
          <TextInput.../>
          <TextInput.../>
          <TextInput.../>

        </KeyboardAvoidingView>

        <TouchableOpacity style={[styles.button, { display }]}>
          <Text style={styles.buttonText} onPress={this.handleSignUp}>
            Sign up
          </Text>
        </TouchableOpacity>

        {this.state.errorMessage && (
          <Text style={{ color: "#b71c1c", textAlign: "center" }}>
            {this.state.errorMessage}
          </Text>
        )}
      </View>
    );
  }
}

const styles = StyleSheet.create({      ...    });

我知道这个问题是之前提出的，但是对我有用。

Answer 1

尝试在组件的构造函数中绑定要更新状态的函数。您可能需要阅读this。

Answer 2

似乎警告来自组件的Catch函数之一。该函数无法正确解析，然后尝试设置为setState，但是您已经导航到另一个页面。而不是调用.catch(error => this.setState({ errorMessage: error.message }));

尝试类似.catch(error => console.warn(error));

尽管不清楚为什么这样做，但是日志会告诉您最有可能发生的事情。

警告：无法在React Native中调用setState（或forceUpdate）

2 个答案: