Как использовать контекстные функции в прослушивателе событий

#javascript #react-hooks #event-listener #react-context

Вопрос:

Я новичок в реагировании, даже новичок в веб-сокетах, я пытался, но, похоже, не могу этого понять. У меня есть приложение для заказа напитков. Я открываю веб-сокеты, поэтому все клиенты, вошедшие под определенным именем пользователя, могут обновлять свои данные каждый раз, когда данные в базе данных обновляются (если есть более простой способ, скажите мне, я мог бы попробовать). Итак, проблема в том, что у меня есть контекст, называемый общей информацией, в котором хранятся все данные, такие как заказы, товары, которые необходимо заказать, и так далее. Для лучшего использования контекстная переменная содержит также функцию, которая с помощью сервера перезагружает данные, изначально заданные следующим образом:

 reload: async (  ...what: Arraylt;ReloadTypesgt;  ) =gt; {console.log("context original function")},  isLoaded: false,  places: [""],  items: [{ name: "", more: [{ value1: "", value2: "" }, ""] }],  ingredients: [{ value1: "", value2: "" }, ""],  orders: [  {  orderId: "",  for: "",  time: "",  items: [{ name: "", amount: 0, more: [""] }],  },  ],    // then later i do this in the functional component  const context = {  reload,  isLoaded,  places,  items,  ingredients,  orders,  } 

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

 useEffect(() =gt; {  function onMessageFunction(message: MessageEvent) {  const data = JSON.parse(message.data);  if (data.type === "reload") {  GeneralInfoContext.reload("orders");    } else {  console.log(data);  }  }  console.log(GeneralInfoContext.reload);  if (isSignedIn) {  socket.current = new WebSocket("ws://localhost:5000");  socket.current.addEventListener("open", () =gt; {  console.log("opened websocket connection! ");  });  socket.current.addEventListener("message", onMessageFunction);  }  return () =gt; {  socket.current = undefined;  };  }, [isSignedIn, GeneralInfoContext.reload]); 

В этом и заключается проблема. Созданный прослушиватель событий использует значение по умолчанию контекстной функции reload(), а не перезаписанное. Так что в результате ничего не происходит, ну, в этом примере я бы получил журнал консоли, но это не тот результат, на который я надеюсь. Вопрос в том, как создать прослушиватель событий, в котором я использую правильную, обновленную функцию reloa (), а не исходное значение контекста? Теперь, вероятно, в крючке эффектов есть куча неправильных вещей, но я могу понять это позже, большая часть этого еще не закончена, но это все, что я сделал, пытаясь поддерживать прослушиватель событий в актуальном состоянии, и большая часть этого только в попытке исправить это. Я буду благодарен вам за вашу проницательность

Комментарии:

1. Не очень знаком с реакцией, извините, но, как я догадываюсь, нужна привязка? например .addEventListener(«открыть», () =gt; {… ваша функция…}.привязать(это))

2. Или привязать(сокет), а затем «это» — это сам сокет в функции