时间戳

首页 > 解决方案 > 如何修复“预期返回值为 31 位整数”错误反应挂钩

reactjs - 如何修复“预期返回值为 31 位整数”错误反应挂钩

问题描述

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

警告：calculateChangedBits：预期返回值为 31 位整数。而是收到：未定义

我的背景

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>
  )
}

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

标签： reactjsreact-hooks

解决方案

第二个参数createContext是未记录的calculateChangedBits回调函数。

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

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

它应该是：

export const CountCtx = createContext(0);

推荐阅读