РЕШЕНО: useState обновляется, но компонент не перерисовывается - PullRequest
Новая
       112

РЕШЕНО: useState обновляется, но компонент не перерисовывается

0 голосов
/ 21 июня 2020

Я использую useSWR для получения обновлений с сервера. 

const {data, error} = useSWR('url', url => fetch(url).then(r => r.json()), { refreshInterval: 1000 })

Сервер возвращает: 

{
  "values": {
    "width": 1920,
    "height": 1080
  }
}

Затем я использую useEffect для обновления локального состояния, например это: 

const [width, setWidth] = useState(0)
const [height, setHeight] = useState(0)

useEffect(() => {
  if(data) {
    setWidth(data.values.width)
    setHeight(data.values.height)
    // console.log statement to check whether this runs
    console.log(`width: ${width}, height: ${height}`)
  }
}, [data])

Мое возвращаемое значение: 

<div style={{ width, height }}></div>

Состояние обновлено, и я получаю журналы, которые показывают, что width и height были обновлены с * От 1017 *, 0 до 1920, 1080. Но ширина и высота компонента остаются 0px, 0px.

Есть идеи, почему это происходит?

Обновление

Это не было связано с реакцией. Мой сервер возвращал строковые значения вместо целых чисел. Журнал консоли печатал строки без кавычек, поэтому я его пропустил. Просмотр размеров компонента в инструментах разработчика показал мне NaNpx, NaNpx. Исправление возвращаемого значения на стороне сервера, устранило проблему.

Ответы [ 2 ]

0 голосов
/ 21 июня 2020

Попробуйте это 

 <div style={{ width :`${width}px` ,height: `${height}px` }}></div>
0 голосов
/ 21 июня 2020

реагирует на обновление состояния асинхронно, поэтому добавление console.log после срабатывания setState не означает обновление состояния. чтобы проверить ширину и изменение высоты, используйте хук useEffect, например: 

useEffect(()=>console.log(height,width),[width,height])

этот эффект будет срабатывать каждый раз при изменении высоты или ширины.

...