React Native FlatList 逐字符呈现数据

Question

我有一个这样的对象数组：

[
  {"name":"XYZ","price":100,"instock":true},
  {"name":"OTR","price":945,"instock":true},
  {"name":"SLG","price":343,"instock":true}
]

Flatlist renderItem 像这样单独显示每个字符 Output screenshot

我的代码是这样的

<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 AsyncStorage.getItem("CartItems") 得到的 谁能帮我解决这个问题？？

Answer 1

对我来说，问题是在 REDUX 中保存时我没有将我的 API 转换为 JSON 对象。

let itemList = JSON.parse(response.data.response.dataList)

我这样做了，错误消失了。

Answer 2

这就像循环遍历一个对象数组，通过说 {item} 表示数组的每个对象，将 item 添加到文本字段会将整个对象显示为字符串！我假设您只想显示对象中的某个键，例如：让我们将名称添加到文本字段：

 <View>
          {cartItems !== [] && (
            <FlatList
              data={[cartItems]}
              renderItem={({item}) => (
                <View>
                  <Text>{item.name}</Text>
                </View>
              )}
              keyExtractor={(item, index) => index.toString()}
            />
          )}
        </View>

注意我们访问了项目对象的属性名（objectName.propertyName）

Answer 3

您需要对要显示的字段进行解构...

renderItem={({item: { name, price }}) => (

<Text>{name}</Text>

第一种方法 因为你在做什么 -> Text>{item}</Text> 正在显示你的对象 .toString() 的表示 {"name":"XYZ","price":100,"instock":true}

编辑 - 第 2 期

在您的第二种方法中 您将cardItems 传递到数组data={[cartItems]} ...因此，您将带有单个项目（cardItems）的数组填充到您的FlatList ...这将导致该array-的.toString()表示形式of-objects项目

<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...

Answer 4

您需要访问item.name
并检查cartItems.length

import React from "react";
import { Button, FlatList, StyleSheet, Text, View } from "react-native";

const cartItems = [
  { name: "XYZ", price: 100, instock: true },
  { name: "OTR", price: 945, instock: true },
  { name: "SLG", price: 343, instock: true }
];
function App() {
   if (cartItems.length > 0)
    return (
      <View>
        <FlatList
          data={cartItems}
          renderItem={({ item }) => (
            <View>
              <Text>{item.name}</Text>
            </View>
          )}
          keyExtractor={(item, index) => item + index.toString()}
        />
      </View>
    );
}

export default App;