React Hook возвращает базовые значения в useEffect - PullRequest
Новая
       3

React Hook возвращает базовые значения в useEffect

0 голосов
/ 25 мая 2020
• 1000 ценности. Я полностью озадачен и не уверен, почему, и мне было любопытно, может ли кто-нибудь помочь, очень признателен. 

const [view, setView] = useState(false)
const [curFlip, setFlip] = useState(null)

tradeSocket.addEventListener('message', async (msg) => {
      const message = JSON.parse(msg.data)
      if (message.tradelink) {
        // not needed
      } else if (message.redItems || message.blueItems) {
        // not needed
      } else if (message.flips) {
        console.log('effect ', view, curFlip) // this is where the issue occurs, it returns false and null
        if (view && curFlip) {
          console.log('theyre viewing a flip')
          for (let i = 0; i < message.flips.length; i++) {
            console.log('looping ' + i, message.flips[i].offer)
            if (message.flips[i].offer === curFlip.offer) {
              setFlip(message.flips[i])
            }
          }
        }

        setCoinflips(message.flips)
      } else if (message.tradeid) {
        // not needed
      }
    })

Изображение того, какие значения он возвращает для каждого вызванного рендеринга / эффекта.

1 Ответ

0 голосов
/ 26 мая 2020
• 1000 всегда показывать начальное значение

Решение состоит в том, чтобы добавить view и curFlip в массив зависимостей useEffect и закрыть сокет в функции очистки useEffect 

useEffect(() => {
  tradeSocket.addEventListener('message', async (msg) => {
      const message = JSON.parse(msg.data)
      if (message.tradelink) {
        // not needed
      } else if (message.redItems || message.blueItems) {
        // not needed
      } else if (message.flips) {
        console.log('effect ', view, curFlip) // this is where the issue occurs, it returns false and null
        if (view && curFlip) {
          console.log('theyre viewing a flip')
          for (let i = 0; i < message.flips.length; i++) {
            console.log('looping ' + i, message.flips[i].offer)
            if (message.flips[i].offer === curFlip.offer) {
              setFlip(message.flips[i])
            }
          }
        }

        setCoinflips(message.flips)
      } else if (message.tradeid) {
        // not needed
      }
    })
    return () => {
        tradeSocket.close();
    }
 }
}, [curFlip, view]);
...