将 react 16.2 升级到 16.8 后，上下文消费者会收到以前的值而不是当前值

Question

我一直在使用 react 16.2，并且 context 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>
  )
}

当我切换到 react 16.8 时，此代码会发生故障。每当调用onUpdate 时，都会更新提供程序值。但是，消费者永远不会收到更新的值。

如果我记录时间线，我可以看到 react 的内部 propagateContextChange 方法被调用，但之后没有任何反应。

Answer 1

我自己回答的！我只升级了 react，忘了升级 react-dom。新版本的 react 依赖于新版本的 react-dom，所以升级破坏了 react 上下文。

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
}