响应本机FlatList按字符呈现数据字符
我有一个像这样的对象数组：
[
{"name":"XYZ","price":100,"instock":true},
{"name":"OTR","price":945,"instock":true},
{"name":"SLG","price":343,"instock":true}
]Flatlist renderItem显示每个字符，就像下面的输出截图
我的代码是
<View>
{cartItems !== [] && (
<FlatList
data={cartItems}
renderItem={({item}) => (
<View>
<Text>{item}</Text>
</View>
)}
keyExtractor={(item, index) => index.toString()}
/>
)}
</View>我也尝试过这个renderItem={({item: {name, price}}) => ()}并尝试打印，它没有显示任何东西，当我记录它来安慰它们时，它们都是未定义的。
<View>
{cartItems !== [] && (
<FlatList
data={[cartItems]}
renderItem={({item}) => (
<View>
<Text>{item}</Text>
</View>
)}
keyExtractor={(item, index) => index.toString()}
/>
)}
</View>我还分解了
但它是这样呈现的
[{"name":"XYZ","price":100,"instock":true},
{"name":"OTR","price":945,"instock":true},
{"name":"SLG","price":343,"instock":true}]这是完整的代码
const ManageOrders = () => {
const [cartItems, setCartItems] = useState([]);
const getItem = async () => {
try {
const item = await AsyncStorage.getItem('CartItem');
// const items = JSON.parse(item); //This gave me error
setCartItems(item);
} catch (error) {
console.log(error);
}
};
useEffect(() => {
getItem();
}, []);
// const data = JSON.parse(cartItems) //This gave me error
return (
<>
<SafeAreaView style={styles.safeAreaView1} />
<SafeAreaView style={styles.safeAreaView2}>
<View>
{cartItems !== [] && (
<FlatList
data={cartItems}
renderItem={({item}) => (
<View>
<Text>{item}</Text>
</View>
)}
keyExtractor={(item, index) => index.toString()}
/>
)}
</View>
</SafeAreaView>
</>
);
};
export default ManageOrders;注意:我从异步存储cartItems获得的数据AsyncStorage.getItem("CartItems")，有人能帮我吗？
回答 4
Stack Overflow用户
发布于 2021-04-14 05:31:59
对我来说，问题是当我在REDUX中保存时，我不会在JSON对象中转换API。
let itemList = JSON.parse(response.data.response.dataList)我做了这个，错误就消失了。
Stack Overflow用户
发布于 2021-02-07 10:00:09
你需要去构造你想要显示的字段.
renderItem={({item: { name, price }}) => (
<Text>{name}</Text>
在您的第一种方法中，因为您通过这个-> Text>{item}</Text>所做的是显示对象{"name":"XYZ","price":100,"instock":true}的.toString()表示
编辑-第二期
在您的第二种方法中，您将cardItems传递到数组data={[cartItems]} .因此，将一个带有单个项(cardItems)的数组填充到您的FlatList .，这将导致该array-of-objects项的.toString()表示。
<View>
{
cardItems ?
<FlatList
data={cartItems} // <--- Look at me
renderItem={({ item: { name } }) => (
<View>
<Text>{name}</Text>
</View>
)}
keyExtractor={(item, index) => index.toString()}
/>
: <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center'}}><Text>Loading</Text></View>}
</View>第三期
如果你要让cardItems通过异步操作.那你得先检查它是否存在..。如果它有物品..。因为一开始是undefined，然后你的条件cartItems !== []会评估到false，你的FlatList会被渲染.
第4期：)
你从AsyncStorage那里得到你的数据..。它很紧张..。所以别忘了先JSON.parse .
Stack Overflow用户
发布于 2021-02-07 10:01:42
这就像在对象数组中循环一样，表示{ item }表示数组的每个对象，将项添加到文本字段将显示整个对象为string！我假设您只想从对象中显示特定的键，例如:让我们将名称添加到文本字段：
<View>
{cartItems !== [] && (
<FlatList
data={[cartItems]}
renderItem={({item}) => (
<View>
<Text>{item.name}</Text>
</View>
)}
keyExtractor={(item, index) => index.toString()}
/>
)}
</View>注意，我们访问了item对象(objectName.propertyName)的属性名。
https://stackoverflow.com/questions/66086552
复制相似问题
腾讯云开发者
