Javascript 如何在react native中对特定响应调用函数

在我得到的对象响应下面，在失败响应上，我试图调用打开模式的函数。 但我猜这是错误的做法，请纠正我。若我调用相同的函数按钮，点击，那个么模态就来了。请告诉我如何打开失败和成功模式，我将进入下一页屏幕。 请推荐我

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

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>
)

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

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>
)

this.state={
isModalVisible:错误，
}
_toggleModal=（）=>
this.setState（{isModalVisible:！this.state.isModalVisible}）；
render（）{
const{validateUserResponse}=this.props；
如果（！.isEmpty（validateUserResponse））{
validateUserResponse.status=='FAILURE'？这个。_toggleModal（）：LoadScreen.bind（即，2，validateUserResponse）（）；
}
返回(
这是.\u toggleModal（）}
onBackdropPress={（）=>这个
样式={{margin:0}}
>
这个。_toggleModal（）}>
客户电子验证失败
这是。_toggleModal（）}/>
这个。_gotoDashboard（）}/>
)

---

谢谢

您不应该在“渲染方法”中更改状态。“切换模式”是一种改变状态的方法，这是一种糟糕的方法

你应该使用

getDerivedStateFromProps在调用渲染之前被调用 方法，无论是在初始装载时还是在后续更新时。它应该 返回对象以更新状态，或返回null以不更新任何内容

---

感谢您的时间，validateUserResponse来自props。。这是在按钮动作之后发生的。我是说在提交表格之后。