React发布了一个不错的custom hook example（useFriendStatus），其中的钩子订阅了API以更新在线状态。 我试图模拟这个例子。我的钩子如下所示：

export default function useStore(id) {
  const [data,setStatus] = useState(DataLayer.getData());



  useEffect(() => {

    function handleStatusChange() {
      console.log("udpate ...." + id);
      console.log(DataLayer.getData());
      setStatus(DataLayer.getData());
    }

    DataLayer.register({"id":id,"callback":handleStatusChange});
    setStatus(DataLayer.getData());
    return () => {
      DataLayer.unregister(id,handleStatusChange);
    };
  });


  return data;
}

DataLayer实现了setInterval方法，该方法永久性地通知钩子并更改数据以进行测试。因此，我总是在控制台上获得update ....消息以及当前对象。效果很好！

我的组件如下所示，但不会重新渲染：

function MyComponent (props) {
  const config = useStore(Math.floor((Math.random() * 1000) + 1));


  return (
    <div >
      <pre>
        <code> {JSON.stringify(config,null,3)} </code>
      </pre>
    </div>
  );
}

为什么我的使用自定义钩子的组件未更新？