Skip to content

lucky-canvas/react gutter did not reRender #567

@lemondreamtobe

Description

@lemondreamtobe
export default class LuckyWheel extends React.Component {
  constructor (props) {
    super(props)
    this.myLucky = React.createRef()
    this.lucky = undefined
  }
  componentDidMount () {
    // 当前已经有实例时,不再进行,解决在`react18 + strictMode`下组件componentDidMount会被触发两次的问题
    if (this.lucky) {
      return
    }
    this.myLucky.current.setAttribute('package', `${name}@${version}`)
    try {
      this.initLucky()
      this.props.onSuccess && this.props.onSuccess()
    } catch (err) {
      this.props.onError && this.props.onError(err)
    } finally {
      this.props.onFinally && this.props.onFinally()
    }
  }
  componentDidUpdate (prevProps) {
    if (!this.lucky) return
    if (this.props.width !== prevProps.width) {
      this.lucky.width = this.props.width
    }
    if (this.props.height !== prevProps.height) {
      this.lucky.height = this.props.height
    }
    if (this.props.blocks !== prevProps.blocks) {
      this.lucky.blocks = this.props.blocks
    }
    if (this.props.prizes !== prevProps.prizes) {
      this.lucky.prizes = this.props.prizes
    }
    if (this.props.buttons !== prevProps.buttons) {
      this.lucky.buttons = this.props.buttons
    }
  }

componentDidUpdate中没有对gutter做处理,会导致改变gutter场景的时候,大转盘不更新
通过debugger,lucky-canvas/react中的defaultConfig是更新了的,问题回到lucky-core,通过代码分析

Image 当外部的defaultConfig更新时,只会触发draw,但是不会更新_defaultConfig,而实际绘制中只会读_defaultConfig

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions