我嘗試使用 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. ）我使用 flatlist 因為這個：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: [],
},
//...
];
uj5u.com熱心網友回復：
這里的問題是您提供letter給FlatList's data prop，但這不是全域letter變數，而是外部 map 函式的區域范圍之一。你給了他們同樣的名字。因此，letter在map函式中是一個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)零件。
如果您需要兩者data并且desription在同一個FlatList中，那么您仍然可以保留內部地圖功能。
<FlatList
data={datum.data}
numColumns={2}
keyExtractor={(_, index) => index.toString()}
renderItem={({ item, index }) => {
return (
<View>
<Text>{datum.description[index]}</Text>
</View>
);
}}
/>
uj5u.com熱心網友回復：
您可以從陣列中獲取資料。步驟：01 內部 API 呼叫。jsonElement["字母"]
Step:02 const [dataSource, setDataSource] = useState([]);
步驟：03
<FlatList horizontal={true} data={dataSource} />
步驟：04 {item.id} ? {item.name}
uj5u.com熱心網友回復：
當我運行您的代碼時，我面臨與 div 標簽相關的不同錯誤。React-Native 沒有 dom，如果你沒有自定義的 'div' 組件，你就不能使用 div 標簽。即使專案中有“Div”組件，組件名稱也應以大寫字母開頭。
轉載請註明出處，本文鏈接：https://www.uj5u.com/qukuanlian/486061.html