如何修复 'Expected the return value to be a 31-bit integer' 错误反应挂钩

Question

我为有经验的钩子创建了一个计数器，上下文 api 一切正常，但我有一个警告：

Warning: calculateChangedBits: Expected the return value to be a 31-bit integer. Instead received: undefined

我的背景

export const CountCtx = createContext(0, () => {});

function CountContext() {
  const [count, setCount] = useState(0);

  return (
    <div className="cp1">
      <CountCtx.Provider value={[count, setCount]}>
        <p>Component where i created the context 'CountCtx'<br/>Counter is {count}</p>
        <button onClick={() => setCount(count + 1)}>Increment</button>
        <ComponentA/>
      </CountCtx.Provider>
    </div>
  )
}

组件 A

function ComponentA() {
  const [count, setCount] = useContext(CountCtx);

  return (
    <div className="cp2">
      <p><b>Component A</b><br/>Counter is {count}</p>
      <button onClick={() => setCount(0)}>Reset</button>
      <ComponentB/>
    </div>
  )
}

组件 B

function ComponentB() {
  const [count, setCount] = useContext(CountCtx);

  return (
    <div className="cp3">
      <p><b>Component B</b><br/>Counter is {count}</p>
      <button onClick={() => setCount(count -1)}>Decrement</button>
    </div>
  )
}

非常感谢我不明白这个警告:-/

Answer 1

createContext 中的第二个参数是 undocumented calculateChangedBits callback function。

由于提供了无效的回调，这会阻止上下文工作：

export const CountCtx = createContext(0, () => {});

应该是：

export const CountCtx = createContext(0);

Answer 2

createContext 在使用函数作为参数时需要一个 return 值。您使用的函数没有 return 值。所以，而不是

export const CountCtx = createContext(0, () => {});

应该是

export const CountCtx = createContext(0, () => {return 1}); or export const CountCtx = createContext(0, () => 1);

如何修复 'Expected the return value to be a 31-bit integer' 错误反应挂钩

How to fix 'Expected the return value to be a 31-bit integer' error react hooks

reactjs

react-hooks

我的背景

组件 A

组件 B