Tengo un estado que se ve así.
let coinlist = { BTC:0, ETH:0, USDT:0, XRP:0, ADA:0, SOL:0, AVAX:0, DOT:0, DOGE:0, UST:0, SHIB:0, MATIC:0, WBTC:0, CRO:0, DAI:0, LTC:0, ATOM:0, LINK:0, UNI:0, BCH:0, XLM:0 } const [currencies, setCurrencies] = useState(coinlist);Estoy usando un websocket que proporciona los valores de precios en tiempo real de estas monedas. Mi mensaje se ve así.
useEffect(() => { // ...code to set up & configure the websocket ws.current.onmessage = (e) => { let data = JSON.parse(e.data); console.log(data) if (data.type !== "ticker") { return; } setCurrencies({ ...currencies, [data.product_id.replace("-USD","")]:data.price }) }; }, []);Ahora, al recibir cada nuevo precio de cualquiera de las monedas de ws, setState solo actualiza la moneda en particular, es decir, los valores no son persistentes en los setStates. El archivo console.log se parece a esto.
ADA: 0 ATOM: 0 AVAX: 0 BCH: 0 BTC: 0 CRO: 0 DAI: 0 DOGE: 0 DOT: 0 ETH: 0 LINK: 0 LTC: "125.07" MATIC: 0 SHIB: 0 SOL: 0 UNI: 0 USDT: 0 UST: 0 WBTC: 0 XLM: 0 XRP: 0y el siguiente mensaje se ve así.
ADA: 0 ATOM: 0 AVAX: 0 BCH: 0 BTC: "43935.89" CRO: 0 DAI: 0 DOGE: 0 DOT: 0 ETH: 0 LINK: 0 LTC: 0 MATIC: 0 SHIB: 0 SOL: 0 UNI: 0 USDT: 0 UST: 0 WBTC: 0 XLM: 0 XRP: 0Lo que estoy esperando es algo como esto.
BTC: "43935.89" SOL: "10.56" UNI: "277" USDT: "25" UST: "105" WBTC: "200" XLM: "100.23" XRP: "0.5"¿Estoy usando setCurrencies correctamente?
El problema es un cierre obsoleto sobre el estado de las currencies . Use una actualización de estado funcional para actualizar correctamente desde el estado anterior en lugar del estado inicial cerrado en el ámbito de devolución de llamada.
Ejemplo:
useEffect(() => { // ...code to set up & configure the websocket ws.current.onmessage = (e) => { const data = JSON.parse(e.data); console.log(data); if (data.type !== "ticker") { return; } setCurrencies(currencies => ({ // <-- previous state ...currencies, // <-- shallow copy [data.product_id.replace("-USD","")]: data.price })); }; // Don't forget code to clean up socket connections/subscriptions!! }, []);