Question

我正在尝试使用Context API根据用户的登录状态来呈现UI组件。 Context.Consumer似乎正在从Context.Provider中获取值，但是该值存储在1的键上，并且Consumer的子级函数正在从0或_currentValue。

如何让使用者使用新提供的值而不是默认值？

一些简化的代码段...

<Layout />包装所有页面，<MenuContent />在<body />内呈现


const { Provider, Consumer } = React.createContext("defaultValue");


function Layout() {
    return (
        <Provider value="newValue">
          <body>{props.body}</body>
        </Provider>
    );
  }


function MenuContent() {
  console.log('ConsumerObject:', Consumer);
  return(
    <Consumer>
      { value => console.log("value:", value) }
    </Consumer>
    );
  }

控制台显示：


value: "defaultValue"

和


ConsumerObject: {
  '$$typeof': Symbol(react.context),
  _context: {
    '0': 'defaultValue',
    '1': 'newValue',
    '$$typeof': Symbol(react.context),
    _calculateChangedBits: null,
    _currentValue: 'defaultValue',
    _currentValue2: 'defaultValue',
    _threadCount: 2,
    Provider: { '$$typeof': Symbol(react.provider), _context: [Circular] },
    Consumer: [Circular],
    _currentRenderer: null,
    _currentRenderer2: null
  },
  _calculateChangedBits: null
}

因此，我看到newValue在Consumer对象上，但是它似乎不在正确的位置，因此无法如文档所示进行访问。

希望我已经讲得足够好了……预先感谢。

Answer 1

我已经尝试过您的代码，而且看起来很正常。在您的使用者日志中，Consumer的类型是[Circular]，而不是Symbol(react.context)。

Context.Consumer未使用Context.Provider

1 个答案: