the本机: Flatlist数据部分中的错误
我尝试使用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. )，因此我使用了平面列表：React Native : Conditional Views。这是我的代码：
<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: [],
},
//...
];回答 3
Stack Overflow用户
发布于 2022-06-03 11:31:24
这里的问题是，您将letter提供给FlatList的数据支柱，但这不是全局letter变量，而是外部映射函数的局部作用域之一。您给它们取了相同的名称。因此，map函数中的letter是object and not an array。
在我看来，您似乎想要为“全局”字母变量中的每个对象创建一个FlatList，并提供每个对象的description属性(这是一个数组，您正在通过索引访问它，这是不必要的)。
因此，您实际上只需要使用一个映射并删除内部map函数。我还会将局部变量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)部分。
如果您同时需要data和desription在同一个FlatList中，那么仍然可以保留内部映射函数。
<FlatList
data={datum.data}
numColumns={2}
keyExtractor={(_, index) => index.toString()}
renderItem={({ item, index }) => {
return (
<View>
<Text>{datum.description[index]}</Text>
</View>
);
}}
/>Stack Overflow用户
发布于 2022-06-03 10:43:25
您可以从数组中获取数据。步骤:01内部API调用。jsonElement“信件”
步骤:02 const dataSource，setDataSource = useState([])；
步骤:03
<FlatList horizontal={true} data={dataSource} />步骤:04 {item.id}₹{item.name}
Stack Overflow用户
发布于 2022-06-03 10:53:06
当我运行您的代码时，会遇到与div标记相关的另一个错误。React本机没有dom，如果您没有自定义的“div”组件，则不能使用div标记。即使“Div”组件在您的项目中，组件名称也应该以大写字母开头。
https://stackoverflow.com/questions/72488194
复制相似问题
腾讯云开发者
