После обновления с 16.2 до 16.8 потребители контекста получают предыдущее значение вместо текущего

Question

Я использую реагирование 16.2, и контекстный API работает, как и ожидалось, со следующей структурой.

const MyContext = createContext(null);

class Provider extends Component {
  state = {
    id: 'A value I set'
  }

  onUpdate = (e) => {
    const { id } = e.dataset
    this.setState({ id });
  }

  render() {
    const { children } = this.props;
    const { id } = this.state;
    return(
      <MyContext.Provider value={id}>
        {children}
      </MyContext.Provider>
    )
  }
}

function ConsumerHOC(WrappedComponent) {
  function renderWrappedComponent(id) {
    return <WrappedComponent id={id} />
  }
  return (
    <MyContext.Consumer>
      {renderWrappedComponent}
    </MyContext.Consumer>
  )
}

Когда я переключился на реакцию 16.8, этот код не работает. Всякий раз, когда onUpdate вызывается, значение провайдера обновляется. Однако потребитель никогда не получает обновленное значение.

Если я записываю временную шкалу, я вижу, что внутренний метод реагирования propagateContextChange вызывается, но после этого ничего не происходит.

Answer 1

Я ответил на это сам!Я только улучшил реакцию, и забыл также обновить реактив.Новая версия реагирует на новую версию реактив-дом, поэтому обновление нарушает контекст реакции.

Answer 2

В 16.8 вам нужно будет использовать потребителя контекста с помощью рендера, как этот ...

<MyContext.Consumer>
  { context => <YourComponent {...context} /> }
</MyContext.Consumer>

Это потребует от вас рефакторинга вашего HOC следующим образом ...

function ConsumerHOC(WrappedComponent) {
  function renderWrappedComponent(id) {
    return (
      <MyContext.Consumer>
        { value => <WrappedComponent id={id} contextValue={value} /> } // if you don't want to pass through all the context's properties, you can chose which props to pass to the wrapped component
      </MyContext.Consumer>
    )
  }
  return renderWrappedComponent
}