Question

我构建了我的本机应用程序，并且我有模态，当模态关闭且visible = false时，它将调用unmount，然后模态的引用未定义，因此我无法再次使用模态。

我的情态的一部分

componentDidMount() {
    try {
        this.props.onRef(this)

    } catch (e) {
        console.log(e)
    }
}
componentWillUnmount() {
    console.log('willunmount')
    this.props.onRef(undefined)
}
    setModalInvisible = async () => {
    Animated.timing(
        this.state.valueC,
        {
            toValue: 200,
            duration: 800
        }).start(() => {

            AppStore.hideAppointmentPopup()
            this.state.valueC.setValue(0)



        })

}
    render() {

        let { valueC, date, service_type, time, popupType } = this.state

        margin = valueC.interpolate({
            inputRange: [0, 100, 200],
            outputRange: [-screenHeight, 0, screenHeight]
        }),
            opacity = valueC.interpolate({
                inputRange: [0, 100, 200],
                outputRange: [0, 1, 0]
            })
        const { popup, container, btnIconClose, iconClose, viewIconClose, viewTextContent, textStyleHeader, textStyleSuccess, textStyleWaiting, viewBtn, submitButton, buttonText } = style;

        return (
            <Modal animationType='fade' transparent={true}
                visible={AppStore.appointmentPopupVisible}
                onRequestClose={() => { this.setModalInvisible() }}>
                <View style={style.container}>

                    <Animated.View style={[style.popup, { marginTop: margin, opacity: opacity }]}>
                        {/* <Button style={btnIconClose} onPress={() => { this.setModalInvisible() }} >
                            <Icon name="close" size={calcSize(45)} color={colors.black} style={iconClose} />
                        </Button> */}
                        {this.renderPopupByType(popupType)}


                        <View style={viewBtn}>
                            <RoundButton text='CLOSE' disabled={false} textStyle={buttonText} style={submitButton} onPress={this.setModalInvisible} />
                        </View>
                    </Animated.View>
                </View>
            </Modal>
        )
    }
}

然后在我要使用它时在其他屏幕上

import { Header,AppointmentPopup } from '../../components';
let popupOpen = false

@inject('AppStore','NavigationStore') @observer
class App extends Component {
    constructor(props) {
        super(props)
        this.state = {
            appState: AppState.currentState,
            nowMounted: false

        }
        this.goBack = this.goBack.bind(this)

    }

    goBack() {
        console.log(this.props.NavigationStore.AppCurrentRoute)
        this.props.NavigationStore.appGoBack(true)
    }

    componentWillMount() {
        this.setState({ nowMounted: true })
    }






    render() {
        return (
            <View style={{ flex: 1 }}>
                <Header  header={this.props.NavigationStore.HeaderTitle} onPressBack={this.goBack}/>
                <AppointmentPopup onRef={(ref) => { this.appointmentPopupRef = ref; this.props.AppStore.setAppointmentPopupRef(ref) }} />

                <AppStack  />
            </View>
        )
    }
}

export default App

当我想与ref一起使用时 this.appointmentPopupRef ，它显示为undefined，因为我关闭了模式，并且没有任何选择可以再次使用它。当我关闭应用程序并再次打开时。我怎样才能防止模态使用未安装？如果我将其删除

   componentWillUnmount() {
        this.props.onRef(undefined)
    }

所以它告诉我错误

警告：setState（...）：只能更新已安装或正在安装的组件。这通常意味着您在未安装的组件上调用了setState（）。这是无人值守。请检查_class组件的代码。

当看不见模态时，对未安装的模态做出反应

0 个答案: