Question

我得到以下对象响应，关于失败响应，我试图调用打开模式的函数。但是我想这是错误的做法，请纠正我。如果我调用相同的功能按钮，则将出现Modal。请我如何打开关于失败和成功的模态，我将得到下一个屏幕。请建议我。

///低于响应/////////

Object response 

validateUserResponse:
reference_id: "NxNxNxNxNxNxNxNxNxNxNxN"
status: "FAILURE"

////////////////////////

this.state={
 isModalVisible: false,
 }

_toggleModal = () =>
    this.setState({ isModalVisible: !this.state.isModalVisible });

render(){
const {validateUserResponse} = this.props;
  if (!_.isEmpty(validateUserResponse)) {
    validateUserResponse.status==='FAILURE'? this._toggleModal():LoadScreen.bind(that, 2, validateUserResponse)();
}

return (
   <View>
          <Modal
            isVisible={this.state.isModalVisible}
            onBackButtonPress={() => this._toggleModal()}
            onBackdropPress={() => this._toggleModal()}
            style={{ margin: 0 }}
          >
            <View style={style.modalContainer}>
              <View style={style.innerContainer}>
                <View style={style.detailsContainer}>
                  <View style={{ flexDirection: 'column', alignItems: 'flex-end', marginTop: -40 }}>
                    <TouchableOpacity onPress={() => this._toggleModal()} >
                      <Image source={CLOSE_W} />
                    </TouchableOpacity>
                  </View>
                  <View style={{ flexDirection: 'column', justifyContent: 'center' }}>
                    <View style={{ flexDirection: 'row', justifyContent: 'center', marginTop: 10, alignContent: 'center', alignItems: 'center', alignSelf: 'center' }}>
                      <IconSmall icon="report-problem" type="MaterialIcons" style={{ color: 'red', paddingRight: 5, paddingBottom: 3 }} />
                      <Text>CUSTOMER E-VALIDATION FAILED</Text>
                    </View>
                    <View style={{
                      justifyContent: 'center',
                      height: 2,
                      margin: 5,
                      borderBottomWidth: 1,
                      borderBottomColor: 'grey',
                      paddingBottom: 10
                    }} />
                  </View>

                  <View style={{ flexDirection: 'column', marginBottom: 10 }}>
                    <RegularText text={'Status'} textColor='grey' style={{ marginBottom: 5 }} />
                    <SmallText text={validateUserResponse.status} textColor='red' />
                  </View>

                  <View style={{ padding: 10 }}>
                    <PrimaryBtn label={'Validate Again'} disabled={false}
                      onPress={() => this._toggleModal()} />
                  </View>

                  <View style={{ padding: 10 }}>
                    <YellowBtn label={'Go to Dashboard'} disabled={false}
                      onPress={() => this._gotoDashboard()} />
                  </View>

                </View>
              </View>
            </View>
          </Modal>
        </View>
)

谢谢

Answer 1

您不应在render方法中更改状态。 “ _toggleModal”是改变状态的方法，是不好的方法。

您应该使用getderivedstatefromprops

getDerivedStateFromProps在调用渲染之前被调用初始安装和后续更新上的方法。这应该返回一个对象以更新状态，或者返回null则不更新任何内容。

static getDerivedStateFromProps(nextProps, prevState){
   if(!_.isEmpty(nextProps.validateUserResponse) && nextProps.validateUserResponse.status==='FAILURE'){
     return { isModalVisible: true};
  }
  else return null;
}

如何在本机反应中对特定响应调用函数

1 个答案: