Question

我正在尝试使用PublicKey钩子将类重构为无状态组件。

该组件本身非常简单，我看不出我在哪里犯错，因为它几乎是来自react文档的复制粘贴。

当用户单击按钮时（按钮通过道具传递到我的组件），该组件显示一个弹出窗口。我正在使用React。

我评论了typescript版本中行不通的行

这是我的原始班级：

hooks

这是export interface NodeMenuProps extends PropsNodeButton { title?: string content?: JSX.Element button?: JSX.Element } export interface NodeMenuState { visible: boolean } export class NodeMenu extends React.Component<NodeMenuProps, NodeMenuState> { state = { visible: false } hide = () => { this.setState({ visible: false }) } handleVisibleChange = (visible: boolean) => { this.setState({ visible }) } render() { return ( <div className={this.props.className}> <div className={styles.requestNodeMenuIcon}> <Popover content={this.props.content} title={this.props.title} trigger="click" placement="bottom" visible={this.state.visible} onVisibleChange={this.handleVisibleChange} > {this.props.button} </Popover> </div> </div> ) } }版本：

React hooks

Answer 1

与setState相似，使用钩子的状态更新行为也需要重新渲染和更新，因此更改不会立即可见。但是，如果您尝试在handleVisibleChange方法之外记录状态，则会看到更新状态

export const NodeMenu: React.SFC<NodeMenuProps> = props => {
  const [isVisible, setIsVisible] = useState(false)      

  const hide = () => {
    setIsVisible(false)
  }

  const handleVisibleChange = (visible: boolean) => {
    console.log(visible) // visible is `true` when user clicks. It works
    setIsVisible(visible) // This does not set isVisible to `true`.
  }      

  console.log({ isVisible });
  return (
    <div className={props.className}>
      <div className={styles.requestNodeMenuIcon}>
        <Popover
          content={props.content}              
          title={props.title}
          trigger="click"
          placement="bottom"
          visible={isVisible}
          onVisibleChange={handleVisibleChange}
        >
          {props.button}
        </Popover>
      </div>
    </div>
  )
}

您可以使用useEffect这样的钩子来完成根据状态是否已更新而需要采取的任何操作

useEffect(() => {
   // take action when isVisible Changed
}, [isVisible])

React Hooks-修改后的状态不会立即反映

1 个答案: