[英]React Native - FlatList data from rest shows only half
我向 api rest 发出请求，它返回一个包含 20 个项目的数组，当我将它作为参数传递给具有平面列表的组件时，它只显示 10 个项目...
谁能解释为什么会这样？
主页.js
componentDidMount() {
HomeApi.get().then( response => {
console.warn(response.profiles.length); //return 20
this.setState({
profiles: response.profiles,
loading: false
});
});
}
<CustomComponent profiles={this.state.profiles} loading={this.state.loading} />
自定义组件.js
export default class CustomComponent extends Component {
render() {
if (this.props.profiles){
console.warn(this.props.profiles.length); //Show 20
}
return (
<View>
{ this.props.loading ? (
<View>
<ActivityIndicator />
</View>
) : (
<FlatList
data={ this.props.profiles}
horizontal={true}
renderItem={({item}) =>
<TouchableOpacity
onPress={() => {
console.warn('press')
}}>
<UserBox user={item}/>
</TouchableOpacity>
}
keyExtractor={(item, index) => index}
/>)}
</View>
)
}
}
用户框.js
export default class UserBox extends Component {
render() {
const {name, bio, featured_image} = this.props.user
return (
<View style={styles.user}>
<Image source={{ uri: featured_image }} style={styles.avatar}/>
<View>
<Text style={styles.name}>{name}</Text>
<Text style={styles.bio}>{bio}</Text>
</View>
</View>
)
}
}
在我使用 Listview 之前，我改变了它，因为我认为这是我不推荐使用的东西，但它给出了相同的结果......
Array from rest api => {
"profiles": [
{
"id": 52,
"name": "Dr. Jasen Prosacco",
"profile_id": 1,
"profile_type": "music-expert",
"surname": "Dejon Kiehn",
"location": "Lake Ellie",
"sex": "male",
"bio": "Commodi nihil blanditiis est enim qui.",
"featured_image": "https://lorempixel.com/640/480/?23591",
"email": "hershel24@example.org",
"birthday": null,
"value": 0
},
{
"id": 53,
"name": "Loyce Stehr",
"profile_id": 2,
"profile_type": "music-expert",
"surname": "Antoinette Murray",
"location": "Grantville",
"sex": "male",
"bio": "Corrupti ad qui aut earum soluta.",
"featured_image": "https://lorempixel.com/640/480/?44684",
"email": "jenkins.willie@example.com",
"birthday": null,
"value": 0
},
{
"id": 54,
"name": "Pearl Daugherty DVM",
"profile_id": 3,
"profile_type": "music-expert",
"surname": "Camden Vandervort",
"location": "Port Susan",
"sex": "male",
"bio": "Unde autem odit sit non id ut aut.",
"featured_image": "https://lorempixel.com/640/480/?86224",
"email": "bryana33@example.net",
"birthday": null,
"value": 0
},
{
"id": 55,
"name": "Demetris Wolff",
"profile_id": 4,
"profile_type": "music-expert",
"surname": "Micaela Wyman",
"location": "East Taylor",
"sex": "male",
"bio": "Saepe sit repellendus aut eveniet sed.",
"featured_image": "https://lorempixel.com/640/480/?15353",
"email": "sskiles@example.org",
"birthday": null,
"value": 0
},
{
"id": 56,
"name": "Felton Boyer",
"profile_id": 5,
"profile_type": "music-expert",
"surname": "Winnifred Batz",
"location": "Deangeloside",
"sex": "male",
"bio": "Sit eum et magni corporis ut unde reiciendis.",
"featured_image": "https://lorempixel.com/640/480/?38995",
"email": "igrimes@example.net",
"birthday": null,
"value": 0
},
{
"id": 57,
"name": "Prof. Elizabeth Ward II",
"profile_id": 6,
"profile_type": "music-expert",
"surname": "Prof. Kieran Cummings II",
"location": "New Briahaven",
"sex": "male",
"bio": "Odio vero officia quia nemo.",
"featured_image": "https://lorempixel.com/640/480/?67307",
"email": "ruecker.stephon@example.com",
"birthday": null,
"value": 0
},
{
"id": 58,
"name": "Mr. Casey McDermott PhD",
"profile_id": 7,
"profile_type": "music-expert",
"surname": "Ramiro Ruecker",
"location": "Devanview",
"sex": "male",
"bio": "Praesentium ex praesentium tempora.",
"featured_image": "https://lorempixel.com/640/480/?37079",
"email": "graham.joanne@example.com",
"birthday": null,
"value": 0
},
{
"id": 59,
"name": "Erich Murray",
"profile_id": 8,
"profile_type": "music-expert",
"surname": "Bailey Hudson",
"location": "Rauburgh",
"sex": "male",
"bio": "Exercitationem laboriosam ut ut iusto dolorum.",
"featured_image": "https://lorempixel.com/640/480/?88371",
"email": "aufderhar.leland@example.net",
"birthday": null,
"value": 0
},
{
"id": 60,
"name": "Mossie Schoen DVM",
"profile_id": 9,
"profile_type": "music-expert",
"surname": "Nelda Kovacek",
"location": "Cedrickfort",
"sex": "male",
"bio": "Consectetur illo et neque beatae.",
"featured_image": "https://lorempixel.com/640/480/?47300",
"email": "gcormier@example.com",
"birthday": null,
"value": 0
},
{
"id": 61,
"name": "Mercedes Sipes",
"profile_id": 10,
"profile_type": "music-expert",
"surname": "Sidney Hayes",
"location": "South Joanymouth",
"sex": "male",
"bio": "Dolorum alias molestias magnam commodi nihil ea temporibus.",
"featured_image": "https://lorempixel.com/640/480/?80896",
"email": "vsporer@example.com",
"birthday": null,
"value": 0
},
{
"id": 62,
"name": "Mr. Otho Schmidt",
"profile_id": 11,
"profile_type": "music-expert",
"surname": "Mrs. Damaris VonRueden DVM",
"location": "Nealstad",
"sex": "male",
"bio": "Aut sequi soluta aut libero quia aperiam iste.",
"featured_image": "https://lorempixel.com/640/480/?83661",
"email": "carroll.kaycee@example.com",
"birthday": null,
"value": 0
},
{
"id": 63,
"name": "Weldon Emard",
"profile_id": 12,
"profile_type": "music-expert",
"surname": "Andy Nicolas",
"location": "Turcotteburgh",
"sex": "male",
"bio": "Aut illo aperiam est facere quod dolores libero.",
"featured_image": "https://lorempixel.com/640/480/?41762",
"email": "akilback@example.org",
"birthday": null,
"value": 0
},
{
"id": 64,
"name": "Dr. Adolfo Gleason I",
"profile_id": 13,
"profile_type": "music-expert",
"surname": "Alexane Quitzon Sr.",
"location": "Port Warrenmouth",
"sex": "male",
"bio": "Magnam temporibus maiores ullam aut.",
"featured_image": "https://lorempixel.com/640/480/?68933",
"email": "madonna.reynolds@example.com",
"birthday": null,
"value": 0
},
{
"id": 65,
"name": "Lennie Carroll",
"profile_id": 14,
"profile_type": "music-expert",
"surname": "Miss Idell Ondricka DVM",
"location": "North Imaberg",
"sex": "male",
"bio": "Omnis dolores dolor excepturi reprehenderit quos.",
"featured_image": "https://lorempixel.com/640/480/?36188",
"email": "felipe.kohler@example.org",
"birthday": null,
"value": 0
},
{
"id": 66,
"name": "Miss Shana Satterfield V",
"profile_id": 15,
"profile_type": "music-expert",
"surname": "Anais Witting",
"location": "Powlowskiview",
"sex": "male",
"bio": "Quia error quam cum qui.",
"featured_image": "https://lorempixel.com/640/480/?50264",
"email": "pollich.rogelio@example.com",
"birthday": null,
"value": 0
},
{
"id": 67,
"name": "Ubaldo Gusikowski",
"profile_id": 16,
"profile_type": "music-expert",
"surname": "Dr. Gunner Considine",
"location": "Davisport",
"sex": "male",
"bio": "Amet asperiores nam aliquid quis dolorem.",
"featured_image": "https://lorempixel.com/640/480/?48372",
"email": "paltenwerth@example.org",
"birthday": null,
"value": 0
},
{
"id": 68,
"name": "Shanel Johnson",
"profile_id": 17,
"profile_type": "music-expert",
"surname": "Trace Heathcote",
"location": "Smithburgh",
"sex": "male",
"bio": "Ipsam debitis aliquam earum sunt totam dolorem ad.",
"featured_image": "https://lorempixel.com/640/480/?57650",
"email": "hills.pablo@example.net",
"birthday": null,
"value": 0
},
{
"id": 69,
"name": "Prof. Reinhold Stanton Jr.",
"profile_id": 18,
"profile_type": "music-expert",
"surname": "Prof. Stefan Kirlin Sr.",
"location": "Krystaltown",
"sex": "male",
"bio": "Nemo quos totam voluptates numquam sint.",
"featured_image": "https://lorempixel.com/640/480/?10383",
"email": "talia02@example.com",
"birthday": null,
"value": 0
},
{
"id": 70,
"name": "Oda Wolff DVM",
"profile_id": 19,
"profile_type": "music-expert",
"surname": "Rodrigo Legros",
"location": "Port Jennings",
"sex": "male",
"bio": "Qui omnis placeat totam sapiente.",
"featured_image": "https://lorempixel.com/640/480/?31712",
"email": "ddare@example.org",
"birthday": null,
"value": 0
},
{
"id": 71,
"name": "Delpha Stark",
"profile_id": 20,
"profile_type": "music-expert",
"surname": "Mr. Jorge Tromp",
"location": "Hansenshire",
"sex": "male",
"bio": "Ea praesentium qui maiores nihil adipisci suscipit minus qui.",
"featured_image": "https://lorempixel.com/640/480/?31960",
"email": "thompson.keenan@example.org",
"birthday": null,
"value": 0
}
]
}
因为你得到了一个 object 的数组，你应该改变以接收 data={ this.props.profiles[0]}，在我的情况下它的工作
仅当前 2 个字符相似时，React 本机搜索栏才会显示平面列表
[英]React native searchbar shows flatlist only if first 2 characters are similar
如何从 JSON 的 FlatList 中仅 output 5 个元素？ React-native
[英]How to output only 5 elements in a FlatList from JSON? React-native
React native flatlist 仅从 firestore 返回一项
[英]React native flatlist return only one item from firestore
为什么来自 Firebase 的数据没有在我的 FlatList (React Native) 中呈现？
[英]Why is the data from Firebase not rendering in my FlatList (React Native)?
如何从 API 中过滤特定数据并将其显示在 React Native Flatlist 中？
[英]How to filter specific data from API and display it in React Native Flatlist?
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.