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

Я использую 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 были обновлены с 0, 0 до 1920, 1080. Но ширина и высота компонента остаются 0px, 0px.

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

Обновлять

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


reactjs next.js use-state
person Akshay    schedule 21.06.2020    source источник

Ответы (2)


arrow_upward
0
arrow_downward

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

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

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

person adel    schedule 21.06.2020
comment
Спасибо, что указали на это. Но эффект использования работал нормально. После дальнейшего расследования я обнаружил, что сервер возвращает ширину и высоту в виде строки. Поскольку объект стиля принимает только значения px как целые числа, мой компонент визуализировался с размерами NaNpx, NaNpx. Преобразование значений в числа перед их установкой в ​​useState устранило эту проблему. Видимо я еще новичок в этом. - person Akshay; 21.06.2020

arrow_upward
0
arrow_downward

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

 <div style={{ width :`${width}px` ,height: `${height}px` }}></div>
person Jeeva    schedule 21.06.2020