Родительское обновление вызывает перемонтирование контекстного потребителя?

Question

У меня есть компонент-обертка, который создает потребителя контекста и передает значение контекста как опору компоненту-обработчику.Когда родительский компонент компонента-оболочки обновляется, он вызывает перемонтирование моего компонента-обработчика вместо простого обновления.

const Wrapper = forwardRef((props, ref) => {
  class ContextHandler extends Component {
    componentDidMount() {
      // handle the context as a side effect
    }

    render() {
      const { data, children } = this.props;
      return (
        <div ref={ref} {...data}>{children}</div>
      );
    }
  }
  return (
    <Context.Consumer>
      {
        context => (
          <ContextHandler
            data={props}
            context={context}
          >
            {props.children}
          </ContextHandler>
        )
      }
    </Context.Consumer>
  );
});

Я помещаю обертку в родительский компонент:

class Parent extends Component {

  state = {
    toggle: false
  }

  updateMe = () => {
    this.setState(({toggle}) => ({toggle: !toggle}))
  }

  render() {
    const { children, data } = this.props;
    return (
      <Wrapper
        onClick={this.updateMe}
        {...data}
        ref={me => this.node = me}
      >
        {children}
      </Wrapper>
    )
  }
}

Когда я нажимаю Wrapper и вызываю обновление в Parent, компонент ContextHandler перемонтируется, что вызывает его состояние для сброса.Следует просто обновить / согласовать и поддерживать состояние.

Что я здесь не так делаю?

Answer 1

Ваш класс ContextHandler реализован в функции рендеринга компонента Wrapper, что означает, что при каждом рендеринге будет создаваться совершенно новый экземпляр.Чтобы решить эту проблему, вытащите реализацию ContextHandler из функции рендеринга для Wrapper.