Блог

Я пытался заставить свое приложение извлекать новые данные каждый раз, когда поступает ответ толкача, но проблема сейчас в том, что для каждого нового ответа количество ответов, похоже, увеличивается на 1, и поэтому это вызов выборки… Например, в первый раз, когда я запрашиваю новые данные, когда я получаю ответ Толкача, я вызываю свой API 1 раз, во второй раз я получаю 2 ответа толкача, затем 3 и так далее, и это сильно замедляет мою производительность… Может ли кто-нибудь объяснить мне, в чем, по-видимому, проблема?

 useEffect(() =gt; {  //Pusher.logToConsole = true;  var pusher = new Pusher("pusherID", {  cluster: "eu",  });  const channel = pusher.subscribe("pusher-channel");  channel.bind("", function (data) {  console.log(data); //log pusher response so I know how many are received  mutate("data"); //fetch data from API  });  });  

Если я проверю свою панель управления Pusher, у меня будет много подключений и отправленных сообщений, и я использую для этого только одно устройство, так что это, вероятно, означает, что это одно устройство подключается несколько раз и отправляет несколько сообщений, что действительно плохо…

Когда у вас есть система подписки, вы обычно хотите подписаться только один раз, и когда ваш компонент готов, это обычно происходит при первом useEffect вызове, и всегда полезно сохранить ссылку на службу, которую вы вызываете, на верхнем уровне вашего компонента(в объекте состояния или ссылки).

Ваша проблема в том, что у вас useEffect нет никакой зависимости, поэтому она в основном запускается каждый раз, когда ваш компонент повторно отправляется. Если вы поместите пустой массив зависимостей, это может решить вашу проблему.

 useEffect(() =gt; {  const pusher = new Pusher("pusherID", {  cluster: "eu",  });  const channel = pusher.subscribe("pusher-channel");  channel.bind("", function (data) {  mutate("data"); //fetch data from API  }); }, []);