Question

我在子组件中使用模型，我想通过子状态变量管理可见性，但是当我单击按钮（也在子状态上）时，子状态变量可以成功更新，但未调用子渲染功能吗？请查看我的代码，然后让我纠正错误的地方。

      //Main Parent class
        
        export default class ChatMessageComponent extends Component {
            renderItem = ({ index, item }) => {
                return (
                  <ChatMessageView
                    {...this.props}      
                  />
                )
              };
            }
    
    //ChatMessageView child 
    export default class ChatMessageView extends PureComponent {
    render() {
        return (
          <View style={[styles.container, isMinimize ? { width: screenWidth - scale(20) } : null]}>
                <ChatNoticeView
                  {...this.props}
    
                />
          </View>
        )
      }
    }
    }
    //ChatNoticeView child
    export default class ChatNoticeView extends Component {
constructor(props) {
    super(props);
    this.state = {
      visibleModal: this.props.isVisible
    }
  }
 renderModAL = () => {
    return (
      <Modal
        visible={this.state.visibleModal}
      >
        <RejectReason
        />
      </Modal>
    )
  }
render() {
    return (
      <View style={styles.container}>
    {this.renderModAL()}
      </View>
    )
  }
}

//Model
export default class RejectReason extends Component {
    componentDidMount() {
    }

    render() {
        return (
            <View style={styles.container}>

            </View>
        )
    }
}

Answer 1

这是因为您的孩子的功能与单击按钮时不会获得更新的状态绑定在一起。需要使用getderivedstatefromprops方法来更新状态或将可见性与道具绑定。我已经更新了您的子组件，该组件应显示模态。

export default class ChatNoticeView extends Component {
constructor(props) {
    super(props);
    this.state = {
      visibleModal: this.props.isVisible
    }
  }
 renderModAL = () => {
    return (
      <Modal
        visible={this.props.isVisible}
      >
        <RejectReason
        />
      </Modal>
    )
  }

您可以了解有关getDerivedStateFromProps here

的更多信息

子状态更改时，子不重新渲染

1 个答案: