#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. Или привязать(сокет), а затем «это» — это сам сокет в функции