Question

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

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

Answer 1

我认为这是JSX错误，因为您的MyComponent第一行。

   function MyComponent (props) {
  const config = useStore(Math.floor((Math.random() * 1000) + 1));
  
  console.log(config); // check you are getting config data ??
  console.log('component is render') //check your component is rendering or not
  return (
<div >

希望对您有帮助。L让我知道您是否有任何问题。

Answer 2

customHook正常工作！问题似乎是setState和一个对象。每次要更新状态时，您都必须为其创建副本，例如与JSON.parse(JSON.stringify(obejct))

仅将修改后的对象传递给setState的简单操作。

带有观察者的自定义挂钩未渲染

2 个答案: