大佬教程收集整理的这篇文章主要介绍了如何从 AsyncStorage 保存的 json 中加载 FlatList 项目？，大佬教程大佬觉得挺不错的，现在分享给大家，也给大家做个参考。
我正在尝试制作一个从 AsyncStorage 获取数据的 FlatList。问题是我无法让它工作，时间似乎一团糟，传递给 FlatList 的数组总是空白。
const [expanded,setExpanded] = React.useState(false);
var searchHistory = [];
const _retrIEveData = async () => {
try {
const value = await AsyncStorage.getItem('searchHistory');
if (value !== null) {
searchHistory = JsON.parse(value);
}
}
catch (error) {
console.log("_retrIEveData Failed!! " + error);
}
}
_retrIEveData();
const expandedSearch = () => {
if(expanded) {
return (
<VIEw style={styles.container}>
<FlatList
data={searchHistory}
renderItem={renderHistoryItem}
/>
</VIEw>
);
}
else {
return null;
}
}
...
{expandedSearch()}
我有一个显示搜索历史项的 FlatList 的切换视图 (expandedSearch)。出于某种原因，当 FlatList 被呈现时，searchHistory 数组是空白的，即使是在切换了 ExpandedSearch 视图时......哪个应该重新呈现 FlatList？
由于某种原因，当呈现 FlatList 时，searchHistory 数组为空
=> 因为你对 var searchHistory = [];
AsyncStorage.getItem('searchHistory'); 是一个等待函数，所以需要时间来获得响应。
您的组件将呈现如下：
用空数组初始化 searchHistory，然后渲染 FlatList，然后用来自 searchHistory 的响应填充 AsyncStorage。因为 searchHistory 是一个变量，而不是一个状态，所以当它的值发生变化时，组件不会重新渲染。
=> 解决方案：
更改 var searchHistory = []; => const [searchHistory,setSearchHistory] = useState([])
并更改 searchHistory = JSON.parse(value); => setSearchHistory(JSON.parse(value))
您需要进行此更改
用var searchHistory = [];替换[searchHistory,setSearchHistory] = React.useState([]);
用searchHistory = JSON.parse(value);替换setSearchHistory(JSON.parse(value))；
这就是解释
您使用 promise async/await 获取数据
所以你需要在数据准备好用数据通知 flatlist 后重新渲染组件，
您可以通过调用 setSearchHistory 来执行此操作，这将重新呈现您的组件
以上是大佬教程为你收集整理的如何从 AsyncStorage 保存的 json 中加载 FlatList 项目？全部内容，希望文章能够帮你解决如何从 AsyncStorage 保存的 json 中加载 FlatList 项目？所遇到的程序开发问题。
如果觉得大佬教程网站内容还不错，欢迎将大佬教程推荐给程序员好友。
本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。