更新

Question

我正在使用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，{ {1}}。但是组件的宽度和高度仍然为1080，0px。

知道为什么会这样吗？

更新

它与反应无关。我的服务器返回的是字符串值而不是整数。控制台日志正在打印不带引号的字符串，所以我错过了它。在开发人员工具中查看组件的尺寸可以看到NaNpx，NaNpx。修复服务器端的返回值，解决了该问题。

Answer 1

异步更新状态，因此在触发console.log之后添加setState并不意味着状态已更新。要检查宽度和高度的变化，请使用useEffect钩子，如下所示：

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

此效果会在每次更改高度或宽度时触发。

Answer 2

尝试一下

 <div style={{ width :`${width}px` ,height: `${height}px` }}></div>

已解决：useState更新，但组件未重新呈现

更新

2 个答案: