Крюк с Observer не отображается

Question

React опубликовал хороший пример пользовательского хука (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, который постоянно уведомляет ловушку и изменяет данные для целей тестирования. Следовательно, я всегда получаю на консоли сообщение об обновлении ...., а также текущий объект. Это отлично работает!

Мой компонент выглядит следующим образом: , но он не выполняет рендеринг :

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


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

);}

Почему мой компонент, использующий пользовательский хук, не обновляется?

Answer 1

CustomHook работает отлично! Кажется, проблема в setState с объектом. Вам необходимо создавать копию этого каждый раз, когда вы хотите обновить состояние, например, с помощью JSON.parse(JSON.stringify(obejct))

Одной простой передачи измененного объекта в setState недостаточно.

Answer 2

Я думаю, что это ошибка 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 и я знаю, если у вас есть какие-либо проблемы.