React Native中如何正确等待API请求完成后再显示对应组件？

问题原因 #

React的状态更新是异步批量处理的。在你的API请求回调中，setAnimals(res)和setLoading(false)会被合并执行。当loading切换为false时，animals还未更新为API返回的数据，此时animals仍是初始空数组，因此会先渲染NoAnimals组件；等animals状态更新完成后，才会重新渲染RenderAnimals。

解决方案 #

方案1：用animals初始状态替代独立loading状态

这种方式无需额外维护loading变量，通过animals的初始值区分加载状态：

import RenderAnimals from '.....'
import NoAnimals from '.....'
import Loading from '.....'
import {getAnimals} from './myCoolAPI'

const App = () => {
  // 初始设为null，表示未加载完成
  const [animals, setAnimals] = useState(null);

  useEffect(() => {
    getAnimals()
      .then(res => setAnimals(res));
  }, [])

  return(
    <View>
      {animals === null 
        ? <Loading /> 
        : animals.length > 0
          ? <RenderAnimals animals={animals} /> 
          : <NoAnimals />
      }
    </View>
  )
}

export default App

方案2：确保loading在animals更新后切换

若需保留loading状态，可通过监听animals变化更新loading：

import RenderAnimals from '.....'
import NoAnimals from '.....'
import Loading from '.....'
import {getAnimals} from './myCoolAPI'

const App = () => {
  const [animals, setAnimals] = useState([])
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    getAnimals().then(res => setAnimals(res));
  }, [])

  useEffect(() => {
    // 当animals状态更新后，结束加载
    setLoading(false);
  }, [animals])

  return(
    <View>
      {loading 
        ? <Loading /> 
        : animals.length > 0
          ? <RenderAnimals animals={animals} /> 
          : <NoAnimals />
      }
    </View>
  )
}

export default App

推荐方案1，它更简洁，完全避免了状态不同步的问题。

内容的提问来源于stack exchange，提问作者AnyamBorogass