这项工作如何“无法在未安装的组件上执行反应状态更新”

时间:2019-09-26 13:03:23

标签: react-native warnings

我试图用Google搜索它,但没有任何效果,这就是为什么我在这里。

有人可以给我一个答案并提供代码来修复它,而不是代替注释(我几周前才开始使用本机响应)

我在stackoverflow上尝试了所有解决方案,但是因为我是一个初学者,所以我不知道如何将解决方案与自己的代码合并。当注册成功时,我会得到错误,当注册成功时,它会进入login.js和 THERE ,它将得到该错误。所以我想问题出在SignIn.js内部。这是我的代码:

**编辑!



export default class SignIn extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      username: "",
      email: "",
      visibleModalId: null
    };
  }

  static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    return {
      title: "- SIGN IN -",
      headerRight: <View />,
      headerLeft: (
        <TouchableOpacity onPress={params.Cancel}>
          <Text style={styles.cancelBtn}>Cancel</Text>
        </TouchableOpacity>
      ),

  };

  cancel = () => {
    console.log("cancel");
    this.props.navigation.navigate("Home");
  };

  componentDidMount() {
    this.props.navigation.setParams({ Cancel: this.cancel });
  }

  renderModalContent = () => (
    <View style={styles.modalContent}>
      <Text style={styles.modalContentTitle}>{this.state.modalTitle}</Text>
      <Button
        onPress={() => this.setState({ visibleModal: null })}
        title="Close"
      />
    </View>
  );

  renderModalContentToHome = () => (
    <View style={styles.modalContent}>
      <Text style={styles.modalContentTitle}>{this.state.modalTitle}</Text>
      <Button onPress={this.closeModalThenHome} title="Close" />
    </View>
  );

将被触摸以关闭模式,然后转到首页

  closeModalThenHome = () => {
    this.props.navigation.navigate("Home");
    this.setState({ visibleModal: null });
  };

  render() {
    let { fadeAnim } = this.state;
    return (
          <Modal
            isVisible={this.state.visibleModal === "fancyThenGoHome"}
            backdropColor="#B4B3DB"
            backdropOpacity={0.8}
            animationIn="zoomInDown"
            animationOut="zoomOutUp"
            animationInTiming={600}
            animationOutTiming={600}
            backdropTransitionInTiming={600}
            backdropTransitionOutTiming={600}
            onBackdropPress={this.closeModalThenHome}
          >
            {this.renderModalContentToHome()}
          </Modal>
    );
  }

  signIn = () => {
    fetch("http://-IP-/signin", {
      method: "POST",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify({
        username: this.state.username,
        email: this.state.email
      })
    })
      .then(response => response.json())
      .then(res => {
        if (res.success === true) {
          this.setState({ visibleModal: "fancyThenGoHome" });
          this.setState({ modalTitle: res.message });
        } else {
          this.setState({ visibleModal: "fancy" });
          this.setState({ modalTitle: res.message });
        }
      })
      .catch(error => {
        console.error(error);
      });
}

我试图安装abortcontroller,但是那也不起作用,希望有人可以帮助我。

谢谢您的时间

1 个答案:

答案 0 :(得分:0)

尝试一下。此代码允许状态完成更新,然后离开。我也在评论中提到了这一点。

  closeModalThenHome = () => {
    this.setState({ visibleModal: null }, () => {
        this.props.navigation.navigate("Home");
    });
  };