Question

我的简化代码是这样的

const Component = () => {
    const [data, setData] = React.useState()
    React.useEffect(() => {
        const dataFromDb = await getAlotOfDataFromBackend()
        setData(dataFromDb)
    })

    return data? <SvgLoadingAnimation/> : <Table data={data}/>
}

我的问题是，调用setData时，加载动画开始严重滞后。我该怎么解决？

Answer 1

也许您应该等待响应，而不是在返回数据之前先设置数据

  const Component = () => {
    const [data, setData] = React.useState(null)
    React.useEffect(() => {
      const getData = async () => {
        const dataFromDb = await getAlotOfDataFromBackend()
        setData(dataFromDb)
       }
      getData()
    },[setData])

    return !data ? <SvgLoadingAnimation/> : <Table data={data}/>
}

动画滞后于重渲染

1 个答案: