Closed king2 closed 3 years ago
For that you could use a spread operator to do it as a one liner:
setData({...data, led_on: event.target.checked}, saveData);
The HoC also exposes a "handeValueChange" prop for convenience when updating a single top-level property from an HtmlInputElement:
onChange={handleValue('some_value')};
And of course you don't have to use the same pattern the UI uses for the example. You could use a WebSocket directly and do it any way you want.
On Sat, Nov 28, 2020 at 2:29 PM Oleg King notifications@github.com wrote:
I have found setData() calls in LightStateWebSocketController.tsx: const changeLedOn = (event: React.ChangeEvent
) => { setData({ led_on: event.target.checked }, saveData); } setData() is defined as function that can take 'data' argument of pre-defined type (in WebSocketController.tsx). If I want to make websockets page that takes many variables from ESP, but each of such variable should be updated separately, I have to make something like this: const changeLedOn = (event: React.ChangeEvent
) => { //setData({ led_on: event.target.checked }, saveData); var new_data = data; new_data.led_on = event.target.checked; setData(new_data, saveData); } (because I have another fields in data and must use antire object when updating). But inside setData() it uses setState() function - and React's setState() can take not full object, just values to be changed. Is this right? Maybe setData() should take arguments like React's setState()?
— You are receiving this because you are subscribed to this thread. Reply to this email directly, view it on GitHub https://github.com/rjwats/esp8266-react/issues/208, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAKE4VFLCIHLCLOL6OJQZV3SSECMJANCNFSM4UF2OA3Q .
I tried '...data' and it works, but as I understand, it will translate into object with two values with same key like this:
setData({ counter: 1, led_on: true, led_on: event.target.checked}, saveData); // for example
Is this behavior (take last value from same keys) is defined somewhere, i.e. can I be sure that new value of led_on will be assigned on all browsers, platforms an so on?
I think handeValueChange is best choice in my case as it has determined behavior.
Thanks!
It's a perfectly valid, well defined use of the spread operator:
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax
On Sat, 28 Nov 2020, 16:43 Oleg King, notifications@github.com wrote:
I tried '...data' and it works, but as I understand, it will translate into object with two values with same key like this:
setData({ counter: 1, led_on: true, led_on: event.target.checked}, saveData); // for example
Is this behavior (take last value from same keys) is defined somewhere, i.e. can I be sure that new value of led_on will be assigned on all browsers, platforms an so on?
I think handeValueChange is best choice in my case as it has determined behavior.
Thanks!
— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/rjwats/esp8266-react/issues/208#issuecomment-735254197, or unsubscribe https://github.com/notifications/unsubscribe-auth/AAKE4VAZ2DSNW4OCSII4HJDSSESD3ANCNFSM4UF2OA3Q .
I will not dig deeper into docs, proposals and trying to find official documents that point to behavior spread operator for same keys in objects, instead of this I will just trust you that last key will override previous one :)
Thank you!
I have found setData() calls in LightStateWebSocketController.tsx:
const changeLedOn = (event: React.ChangeEvent<HTMLInputElement>) => { setData({ led_on: event.target.checked }, saveData); }
setData() is defined as function that can take 'data' argument of pre-defined type (in WebSocketController.tsx). If I want to make websockets page that takes many variables from ESP, but each of such variable should be updated separately, I have to make something like this:
const changeLedOn = (event: React.ChangeEvent<HTMLInputElement>) => { //setData({ led_on: event.target.checked }, saveData); var new_data = data; new_data.led_on = event.target.checked; setData(new_data, saveData); }
(because I have another fields in data and must use antire object when updating). But inside setData() it uses setState() function - and React's setState() can take not full object, just values to be changed.Is this right? Maybe setData() should take arguments like React's setState()?