Question

基本上，我会在render中以console.log值记录，并在Modal通道中显示visible = {the_value}。 Chrome调试器指出该值为false，但是模态仍然存在。甚至react-devtools都说它为false。可能是模拟器问题吗？

另一个问题是：通过此代码，我将“公告”上载到Firebase Realtime DB。当我仅上传文本（快速异步事件）时，会出现模式不消失的问题。当我上传大图像（较长的异步事件）时，模式就会消失。这是有用的提示吗？任何想法将不胜感激。

我尝试过将状态值设置为构造函数中的the_value，但是它永远不会变为真。我也尝试了visible = {this.props.isPushingA}

constructor(props) {
//...
 this.state = { //...
   waitModalVisible: this.props.isPushingA 
 };
}
//...
render() {
 console.log(this.state.waitModalVisible);
 const { failMsgHeight, successMsgHeight } = this.state;
 if (this.props.isSuccess) {
   // animate the showing of the failMSG
   failMsgHeight.setValue(0); // reset the animated value
   Animated.timing(successMsgHeight, {
     toValue: (height / 20), // proportional error msg
     duration: 1000,
     easing: Easing.cubic,
   }).start();
 } else {
   // animate the hiding of the failMSG
   Animated.timing(successMsgHeight, {
     toValue: 0,
     duration: 1000,
     easing: Easing.linear
  }).start();
 } //...
 return (
<ScrollView style={{ flex: 1 }}>
<Animated.View style={{ backgroundColor: '#228B22', height: successMsgHeight }}>
        <Text style={{ color: 'white', fontSize: 20, margin: 5, alignSelf: 'center' }}>
          Success!
        </Text>
</Animated.View
  //...
  <Modal
        visible={this.state.waitModalVisible} 
       // also have tried visible={this.props.isPushingA}
       // this.props.isPushingA is in mapStateToProps
        transparent
        onRequestClose={() => this.props.isAnnouncePushing(false)}
      >
 //...
 );
 //...
}

我希望模态在我的动作（redux-thunk）执行完之后会消失，但永远不会执行。我什至在后台看到Animated.View弹出，进一步证明正确/当前的道具已经传递到组件，并且正在渲染。

编辑：render中的console.log waitModalVisible显示其始终为false，而console.log isPushingA显示其为true然后为false

Answer 1

正如我所见，即使状态更新后，模态仍会保留。您可以尝试以下方法。

  {this.state.waitModalVisible && (<Modal
       visible={this.state.waitModalVisible} 
       // also have tried visible={this.props.isPushingA}
       // this.props.isPushingA is in mapStateToProps
        transparent
        onRequestClose={() => this.props.isAnnouncePushing(false)}
  />)}

这只是解决方法。

实际问题出在您的模态中。一旦visible为假，检查Modal是否接收到属性waitModalVisible。如果没有收到，则您可能需要使用生命周期方法getDerivedStateFromProps并更新您的Modal状态。

即使visible = {this.props.bool}并且this.props.bool为false，模态仍在屏幕上

1 个答案: