我有一个简单的react原生主屏幕，有两个组件。一个组件显示useState数组为空（NoAnimals）时的一些信息。另一个组件显示数组不为空（RenderAnimals）时的数据。我有一个useEffect调用，在这里我进行API调用，并设置加载。
我的问题是，无论我做什么，NoAnimals组件总是首先显示，即使数组不是空的，然后切换到另一个组件。
我如何确保，如果数组不是空的，不显示NoAnimals组件？
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)
setLoading(false)
})
},[])
return(
<View>
{
loading
? <Loading/>
: animals.length >= 1
? <RenderAnimals animals={animals}/>
: <NoAnimals/> //<-- After loading set to false this renders first even if animals array is Not empty
}
</View>
)
}
export default App
1条答案
按热度按时间c9qzyr3d1#
我认为你的问题来自于你的
animals数组被初始化为空（useState([])）。您可以将其初始化为
null。一旦您的数据被加载，它将要么是空的，要么不是。然后，仅当
animals是Array的示例时，才显示animals相关内容（这意味着数据已加载）。或者可以使用初始化为false的
ready变量。然后，一旦API调用完成，就将
ready设置为true。并且只有在加载数据时才显示与
animals相关的内容。