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

您需要解构要显示的字段...

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

<Text>{name}</Text>

第一种方法 因为你正在做的事情 -> Text>{item}</Text> 正在显示你的对象 {"name":"XYZ","price":100,"instock":true}

的 .toString() 表示

编辑 - 第 2 期

第二种方法 您将 cardItems 传递到一个数组 data={[cartItems]} ... 所以，您将一个包含单个项目 (cardItems) 的数组填充到您的 FlatList ... 结果是 .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 它...

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

您需要访问 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;

Answer 4

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

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

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

React Native FlatList逐字符渲染数据

React Native FlatList renders data character by character

react-native

asyncstorage

react-native-flatlist