Hook和AsyncStorage加载FlatList时出现问题

Question

我的应用程序中有两个屏幕，一个屏幕有一个表单，用户在其中存储它在AsyncStorage中填写的数据，另一个屏幕读取保存在AsyncStore中的所有数据，并应在FlatList中显示数据。这里的问题是什么都没有渲染，屏幕是空白的。我不知道问题在哪里，因为如果你阅读代码，console.log(productosData(实际上在我的命令行中返回了完全相同的结果结构。因此productosData加载没有问题，但由于某些原因，这不起作用。

export default function TestScreen () {
const [productosData, setproductosData] = useState([]);        
const ItemView = ({item}) => {
return (
<View>
<Text>
{item}
</Text>
</View>
);
};
useEffect( () => { 
async function cargarEnEstado() { 
const keys = await AsyncStorage.getAllKeys();  
const result = await AsyncStorage.multiGet(keys);  
//result = [["a","b"],["c","d"],["e","f"],["g","h"]]
result.forEach(element => (setproductosData(productosData.push(element))));
console.log(productosData);
}
cargarEnEstado()
},[])
return (
<View style={styles.container}>
<FlatList
data={productosData}
renderItem={ItemView}
/>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 2,
justifyContent: 'center',
alignItems: 'center',
}
});

所以我可能认为问题出在我的FlatList上，然后我决定拿出我的FlatSList，用Text测试钩子，但当我在Text中使用{productosData}时，屏幕会显示一个与第一个结果数组的长度相对应的数字。因此，在这种情况下，我在屏幕上看到一个4，因为result和productosData具有这种结构[["a"，"b"]，["c"，"d"]，[["e"，"f"]，"g"，"h"]]，第一个数组的长度为4。

export default function TestScreen () {
const [productosData, setproductosData] = useState([]);        
const ItemView = ({item}) => {
return (
<View>
<Text>
{item}
</Text>
</View>
);
};
useEffect( () => { 
async function cargarEnEstado() { 
const keys = await AsyncStorage.getAllKeys();  
const result = await AsyncStorage.multiGet(keys);  
//result = [["a","b"],["c","d"],["e","f"],["g","h"]]
result.forEach(element => (setproductosData(productosData.push(element))));
console.log(productosData);
}
cargarEnEstado()
},[])
return (
<View style={styles.container}>
<Text> {productosData} </Text>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 2,
justifyContent: 'center',
alignItems: 'center',
}
});

有什么建议吗？提前谢谢。

Answer 1

没有渲染任何内容的原因是，如果我理解正确的话，element是字符串['a','b']的数组。尝试更改您的项目查看到此

const ItemView = ({item}) => {
return (
<View>
<Text>
{item[0]+ ' , ' + item[1]}
</Text>
</View>
);
};

此外，你的useEffect不是很干净。请注意，React中的状态是不可变的。通过在productosData上调用push，您正在改变状态。首先，创建状态的浅层副本，然后将新对象推入副本。只有这样你才能更新你的状态。

然而，没有理由迭代您的结果，只需将它们分布在状态上，如下所示：

async function cargarEnEstado() { 

const keys = await AsyncStorage.getAllKeys();  
const result = await AsyncStorage.multiGet(keys);  
//result = [["a","b"],["c","d"],["e","f"],["g","h"]]

setProductosData([...productosData, ...result])

console.log(productosData); // Also state is async, so this might not log the correct value
}