如果React的类组件无法及时获得更新的状态，该怎么办？

Question

我有这样的代码。

Modal.confirm({
    tilte: "title",
    content: (
        <>
            <input onChange={
                () => this.setState({ A: true });
            }></input>
            
            this.state.A && <div>text</div>
        </>
    )
})

目的是在输入更改后，将显示＆lt; div＆gt; div＆lt;/div＆gt;，但发现状态a在之后无法及时获得更改，导致div未显示的内容。如何修改它？ ？

Answer 1

问题：
您正在使用命令式（modal.confirm）显示modal，而state更改不触发modal重新渲染。
解决方案：

模态可以声明显示，例如：

class Test extends React.Component {
  state = {
 A: false,
 visible: false
  };
  handleClick = () => {
 this.setState({ visible: true });
  };
  render() {
 const { visible } = this.state;
 return (
   <>
     <Button onClick={this.handleClick}>Show Modal</Button>
     <Modal
       visible={visible}
       onCancel={() => this.setState({ visible: false })}
     >
       <input onChange={() => this.setState({ A: true })}></input>
       {this.state.A && <div>text</div>}
     </Modal>
   </>
 );
  }
}

将modal.confirm显示的内容提取到组件

class ConfirmContent extends React.Component {
  state = {
 A: false
  };
  render() {
 return (
   <>
     <input onChange={() => this.setState({ A: true })}></input>
     {this.state.A && <div>text</div>}
   </>
 );
  }
}

//
Modal.confirm({
  tilte: "title",
  content: <ConfirmContent />
});
//

根本原因：react> react react 是一棵光纤树，这种命令率通常会重新创建光纤树（内部将调用croteroot或reactdom.render），您的问题是更新操作为用Fiber tree1触发的光纤触发（Fiber您在app.tsx中创建的树），而不是fiber on Fiber2 update（您使用确认）的光纤树，一个组件对应于fiber，它们在它们之后属于该光纤树通过creatoroot或reactdom.render s