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

Posted 2023-02-22

【中文标题】子状态更改时子不重新渲染

【英文标题】：Child not re rendering when child state changed

【发布时间】：2021-01-06 12:30:35

【问题描述】：

我在子组件中使用模型，我想通过子状态变量来管理可见性，但是当我点击按钮时（它也在子上），子状态变量更新成功但子渲染函数没有被调用？ 请检查我的代码，让我纠正我的错误。

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

【问题讨论】：

请发布您的代码。

提升状态reactjs.org/docs/lifting-state-up.html

@SaachiTech，我添加了我的代码，请检查。

【参考方案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