React Native：Flatlist 的数据部分出错

Question

我尝试使用 Flatlist 来响应我的一个问题，但我的 Flatlist 的 data= 出现错误。我真的不明白这个问题，错误消息也没有帮助 ( No overload matches this call. Overload 1 of 2, '(props: FlatListProps<any> | Readonly<FlatListProps<any>>): FlatList<any>', gave the following error. Type '{ id: string; name: string; data: string[]; description: string[]; }' is missing the following properties from type 'readonly any[]': length, concat, join, slice, and 19 more. ) 因为这个，我使用了平面列表：。这是我的代码：

         <View style={{ flex: 10}}>
            {letter.map((letter) => {

              const isleetergotdata = letter.data?.length > 0;

              if (!isleetergotdata) {
                return null;
              }
              return (
                <View
                  style={{
                    flex: 1,
                    flexDirection: "row",
                  }}
                >
                  <div
                    ref={fieldRef}
                    style={{
                      marginBottom: 100,
                    }}
                  >
                    <Text
                      style={{
                        fontSize: 90,

                      }}
                    >
                      {letter.name}
                    </Text>
                  </div>

                  {letter.data?.map((item, index) => {
                    if (total !== same) {
                      return (
                        <FlatList
                          data={letter} // HERE IS THE ISSUE
                          numColumns={2}
                          keyExtractor={(_, index) => index.toString()}
                          renderItem={({ item }) => {
                            return (
                              <View>
                                <Text>{letter.description[index]}</Text>
                              </View>
                            );
                          }}
                        />
                      );
                    } 
                  })}
                </View>
              );
            })}
          </View>

这是我的数据：

const letter = [
  {
    id: "1",
    name: "A",
    data: ["Abricot", "Abricot", "Abricot"],
    description: [
      "Un abricot est un fruit",
      "Un abricot est un fruit",
      "Un abricot est un fruit",
    ],
  },
//...
  {
    id: "5",
    name: "E",
    data: [],
    description: [],
  },
//...
];

Answer 1

您可以从数组中获取数据。 Step:01 内部 API 调用。 jsonElement["字母"]

步骤：02 const [dataSource, setDataSource] = useState([]);

步数：03

<FlatList horizontal={true} data={dataSource} /> Step:04 {item.id} ₹{item.name}

Answer 2

当我运行你的代码时，我遇到了与 div 标签相关的不同错误。 React-Native 没有 dom，如果您没有自定义 'div' 组件，则不能使用 div 标签。即使 'Div' 组件在您的项目中，组件名称也应以大写字母开头。

Answer 3

这里的问题是您向 FlatList 的数据属性提供 letter，但这不是全局 letter 变量，而是外部地图功能。你给了他们相同的名字。因此，map 函数中的 letter 是一个 object and not an array.

在我看来，您想为“全局”字母变量中的每个对象创建一个 FlatList，并提供每个对象的 description 属性（其中是一个数组，您正在通过实际上没有必要的索引访问它。

因此，您实际上只需要使用一张地图并删除内部地图功能。我还将局部变量 letter 重命名为其他名称。

         <View style={{ flex: 10}}>
            {letter.map((datum) => {

              const isleetergotdata = datum.data?.length > 0;

              if (!isleetergotdata) {
                return null;
              }
              return (
                <View
                  style={{
                    flex: 1,
                    flexDirection: "row",
                  }}
                >
                  <div
                    ref={fieldRef}
                    style={{
                      marginBottom: 100,
                    }}
                  >
                    <Text
                      style={{
                        fontSize: 90,

                      }}
                    >
                      {datum.name}
                    </Text>
                  </div>

                 
                    if (total !== same) {
                      return (
                        <FlatList
                          data={datum.description} 
                          numColumns={2}
                          keyExtractor={(_, index) => index.toString()}
                          renderItem={({ item }) => {
                            return (
                              <View>
                                <Text>{item}</Text>
                              </View>
                            );
                          }}
                        />
                      );
                    } 
                  )
                 }
                </View>
              );
            })}
          </View>

准确地说，完全删除 letter.data?.map((item, index) 部分。

如果你在同一个FlatList中同时需要data和desription，那么你仍然可以保留内部地图功能。

 <FlatList
    data={datum.data} 
    numColumns={2}
    keyExtractor={(_, index) => index.toString()}
    renderItem={({ item, index }) => {
      return (
        <View>
         <Text>{datum.description[index]}</Text>
        </View>
      );
 }}
/>

React Native：Flatlist 的数据部分出错

React Native : Error in the data part of Flatlist

reactjs

typescript

react-native

react-native-flatlist