React native 异步后端调用上的useEffect和setState不重新呈现组件
我们有一个cardList react本机组件,它是搜索组件的子组件React native 异步后端调用上的useEffect和setState不重新呈现组件,react-native,react-hooks,expo,React Native,React Hooks,Expo,我们有一个cardList react本机组件,它是搜索组件的子组件 export default function CardList(props) { keyExtractor = (item, index) => index.toString() renderItem = ({ item }) => ( <ListItem title={item.name} subtitle={item.subtitle}
export default function CardList(props) {
keyExtractor = (item, index) => index.toString()
renderItem = ({ item }) => (
<ListItem
title={item.name}
subtitle={item.subtitle}
leftAvatar={{
source: item.avatar_url && { uri: item.avatar_url },
title: item.name[0]
}}
bottomDivider
chevron
/>
)
return (
<FlatList
keyExtractor={keyExtractor}
data={props.images}
renderItem={renderItem}
/>
);
}
导出默认功能卡片列表(道具){
keyExtractor=(项,索引)=>index.toString()
renderItem=({item})=>(
)
返回(
);
}
搜索从后端异步获取数据,这需要几秒钟的时间,并使用useEffect完成,出于某些原因,useEffect中的设置键不会重新呈现cardList组件。当我用expo上的热重新加载进行人工刷新时,cardList呈现良好。为什么设置键(useState)不呈现组件
谢谢你的帮助
const [keys, setKeys] = useState([]);
useEffect(() => {
const fetchData = async () => {
const imgkeys = await << 5 second long backend call >>;
setKeys(imgkeys);
}
fetchData();
}, []);
return (
<View>
<View style={{
padding: 5,
}}>
{ (keys) && (keys.length>0) && <CardList images={keys}/> }
</View>
</View>
);
const[keys,setKeys]=useState([]);
useffect(()=>{
const fetchData=async()=>{
常数imgkeys=等待>;
设置键(imgkeys);
}
fetchData();
}, []);
返回(
{(keys)&&(keys.length>0)&&}
);
出于性能原因,setState是异步的,不应该因为状态更新未正确执行而强制同步
您可以这样简单地定义useState:
const [, forceUpdate] = React.useState(0);
forceUpdate(n => !n)