FlatList 在 React Native 中未显示结果。

huangapple
go评论137阅读模式
英文:

FlatList not shown result in React native

问题

I can provide a translation of your code without addressing the issue you mentioned. Here is the translated code:

  1. 我是React Native的新手，我正在尝试创建一个简单的FlatList并从Api https://dummyjson.com/products 填充它，但它从未显示结果...
  2. 以下是我的App.tsx代码
  4. ```javascript
  5. import React from 'react';
  6. import type { PropsWithChildren } from 'react';
  7. import {
  8.   FlatList,
  9.   SafeAreaView,
  10.   ScrollView,
  11.   StatusBar,
  12.   StyleSheet,
  13.   Text,
  14.   useColorScheme,
  15.   View,
  16. } from 'react-native';
  17. import ShopList from './ReusableComponents/ShopList';
  18. import axios from 'axios';
  19. import {
  20.   Colors,
  21.   DebugInstructions,
  22.   Header,
  23.   LearnMoreLinks,
  24.   ReloadInstructions,
  25. } from 'react-native/Libraries/NewAppScreen';
  27. type SectionProps = PropsWithChildren<{
  28.   title: string;
  29. }>;
  31. function App(): JSX.Element {
  32.   const isDarkMode = useColorScheme() === 'dark';
  34.   const backgroundStyle = {
  35.     backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  36.   };
  38.   const shops: ArrayLike<any> | null | undefined = []
  40.   fetch('https://dummyjson.com/products')
  41.     .then(response => response.json())
  42.     .then(result => { shops })
  44.   console.log({ shops })
  46.   return (
  47.     <SafeAreaView style={backgroundStyle}>
  48.       <StatusBar
  49.         barStyle={isDarkMode ? 'light-content' : 'dark-content'}
  50.         backgroundColor={backgroundStyle.backgroundColor}
  51.       />
  53.       <ShopList />
  55.     </SafeAreaView>
  56.   );
  57. }
  59. const styles = StyleSheet.create({
  60.   sectionContainer: {
  61.     marginTop: 32,
  62.     paddingHorizontal: 24,
  63.   },
  64.   sectionTitle: {
  65.     fontSize: 24,
  66.     fontWeight: '600',
  67.   },
  68.   sectionDescription: {
  69.     marginTop: 8,
  70.     fontSize: 18,
  71.     fontWeight: '400',
  72.   },
  73.   highlight: {
  74.     fontWeight: '700',
  75.   },
  76.   edges: {
  77.     flex: 1,
  78.     alignItems: 'center',
  79.     justifyContent: 'center',
  80.     padding: 5,
  81.     minWidth: 50
  82.   }
  83. });
  85. export default App;

以下是ShopList代码

  1. import React, { Component } from 'react';
  3. import {
  4.   View,
  5.   FlatList,
  6.   Image
  7. } from 'react-native'
  8. import ShopListRow from '/Users/nb29042/Desktop/React/DemoShop/ReusableComponents/ShopListRow';
  9. import { ListItem, Avatar } from 'react-native-elements';
  11. export default class ShopList extends Component {
  12.   constructor(props) {
  13.     super(props);
  14.     this.state = {
  15.       shops: []
  16.     }
  17.   }
  19.   fetchItem() {
  20.     requestAnimationFrame(() =>
  21.       fetch(`https://dummyjson.com/products`, {
  22.         method: 'GET',
  23.       })
  24.         .then(response => response.json())
  25.         .then(responseJson => {
  26.           this.setState({ shops: responseJson })
  27.         })
  28.         .catch(error => {
  29.           {
  30.             alert(error)
  31.           }
  32.         }),
  33.     );
  34.   }
  36.   componentDidMount() {
  37.     this.fetchItem()
  38.   }
  41.   render() {
  42.     return (
  44.       <View style={{
  45.         flex: 1,
  46.         backgroundColor: '#FFFFFF'
  47.       }}>
  50.         <FlatList
  51.           data={
  52.             this.state.shops
  53.           }
  54.           renderItem={({ item, index }) => 
  55.             {
  56.               return <ShopListRow 
  57.               shop={item} 
  58.               index={index} 
  59.           
  60.             />;}
  61.           
  63.           }
  64.           keyExtractor={item => item.id}
  65.           initialNumToRender={16}
  66.           extraData={this.state}
  67.         />
  70.       </View>
  71.     );
  72.   }
  73. }

ShopListRow代码如下：

  1. import React, { Component } from 'react';
  3. import {
  4.   View,
  5.   Text,
  6.   StyleSheet,
  7.   TextInput,
  8.   TouchableHighlight,
  9.   FlatList,
  10.   Image
  11. } from 'react-native'
  13. export default class ShopListRow extends Component {
  14.   render() {
  16.     const {
  17.       shop,
  18.       index
  19.     } = this.props
  21.     return (
  22.       <View key={shop.id} style={{ backgroundColor: index % 2 === 0 ? 'white' : '#F3F3F7' }}>
  24.         <View style={styles.row}>
  26.           <View >
  27.             <Text>{shop.title}</Text>
  28.             <Text >{shop.description}</Text>
  29.           </View>
  31.           <View style={styles.edges}>
  33.             <TouchableHighlight 
  34.               //onPress={this.infoPressed}
  35.               style={styles.button}
  36.               underlayColor='#5398DC'
  37.             >
  38.               <Text style={styles.buttonText}>Info</Text>
  39.             </TouchableHighlight>
  42.           </View>
  43.         </View>
  45.       </View>
  46.     )
  47.   }
  48. }
  50. const styles = StyleSheet.create({
  51.   row: {
  52.     flexDirection: 'row'
  53.   },
  54.   edges: {
  55.     flex: 1,
  56.     alignItems: 'center',
  57.     justifyContent: 'center',
  58.     padding: 5,
  59.     minWidth: 50
  60.   },
  61.   stars: {
  62.     flex: 1,
  63.     alignItems: 'center',
  64.     flexDirection: 'row',
  65.     justifyContent: 'flex-start',
  66.     padding: 5,
  67.     minWidth: 50
  68.   },
  69.   nameAddress: {
  70.     flexDirection: 'column',
  71.     flex: 8,
  72.     padding: 5
  73.   },
  74.   addressText: {
  75.     color: 'grey'
  76.   },
  77.   button: {
  78.     borderWidth: 1,
  79.     borderColor: '#0066CC',
  80.     borderRadius: 14,
  81.     paddingHorizontal: 10,
  82.     paddingVertical: 3,
  83.     backgroundColor: '#fff',
  84.   },
  85.   buttonText: {
  86.     color: '#0066CC',
  87.     fontSize: 12
  88.   },
  89.   info: {
  90.     marginHorizontal: 40,
  91.     marginVertical: 10,
  92.     padding: 10,
  93.     backgroundColor: '#fff',
  94.     borderWidth: 1,
  95.     borderColor: '#ddd',
  96.     borderRadius: 4
  97.   }
  98. })

如果有人可以告诉我为什么FlatList没有显示任何结果，我将不胜感激...
最好的问候。

英文:

I am new to React native and i am trying to create a simple flatlist and fill it from Api https://dummyjson.com/products but it never show results ...
here is my App.tsx code

  1. import React from &#39;react&#39;;
  2. import type {PropsWithChildren} from &#39;react&#39;;
  3. import {
  4. FlatList,
  5. SafeAreaView,
  6. ScrollView,
  7. StatusBar,
  8. StyleSheet,
  9. Text,
  10. useColorScheme,
  11. View,
  12. } from &#39;react-native&#39;;
  13. import ShopList from &#39;./ReusableComponents/ShopList&#39;;
  14. import axios from &#39;axios&#39;;
  15. import {
  16. Colors,
  17. DebugInstructions,
  18. Header,
  19. LearnMoreLinks,
  20. ReloadInstructions,
  21. } from &#39;react-native/Libraries/NewAppScreen&#39;;
  22. type SectionProps = PropsWithChildren&lt;{
  23. title: string;
  24. }&gt;;
  25. function App(): JSX.Element {
  26. const isDarkMode = useColorScheme() === &#39;dark&#39;;
  27. const backgroundStyle = {
  28. backgroundColor: isDarkMode ? Colors.darker : Colors.lighter,
  29. };
  30. const shops: ArrayLike&lt;any&gt; | null | undefined = []
  31. fetch(&#39;https://dummyjson.com/products&#39;)
  32. .then(response =&gt; response.json())//hat el jsonresponse law rege3
  33. .then(result =&gt; { shops })
  34. console.log({shops})
  35. return (
  36. &lt;SafeAreaView style={backgroundStyle}&gt;
  37. &lt;StatusBar
  38. barStyle={isDarkMode ? &#39;light-content&#39; : &#39;dark-content&#39;}
  39. backgroundColor={backgroundStyle.backgroundColor}
  40. /&gt;
  41. &lt;ShopList /&gt;
  42. &lt;/SafeAreaView&gt;
  43. );
  44. }
  45. const styles = StyleSheet.create({
  46. sectionContainer: {
  47. marginTop: 32,
  48. paddingHorizontal: 24,
  49. },
  50. sectionTitle: {
  51. fontSize: 24,
  52. fontWeight: &#39;600&#39;,
  53. },
  54. sectionDescription: {
  55. marginTop: 8,
  56. fontSize: 18,
  57. fontWeight: &#39;400&#39;,
  58. },
  59. highlight: {
  60. fontWeight: &#39;700&#39;,
  61. },
  62. edges: {
  63. flex: 1,
  64. alignItems: &#39;center&#39;,
  65. justifyContent: &#39;center&#39;,
  66. padding: 5,
  67. minWidth: 50
  68. }
  69. });
  70. export default App;

And here is ShopList code

  1. import React, {Component} from &#39;react&#39;;
  2. import {
  3. View,
  4. FlatList,
  5. Image
  6. } from &#39;react-native&#39;
  7. import ShopListRow from &#39;/Users/nb29042/Desktop/React/DemoShop/ReusableComponents/ShopListRow&#39;;
  8. import { ListItem, Avatar } from &#39;react-native-elements&#39;;
  9. export default class ShopList extends Component {
  10. constructor(props){
  11. super(props);
  12. this.state = {
  13. shops: []
  14. }
  15. }
  16. fetchItem() {
  17. requestAnimationFrame(() =&gt;
  18. fetch(`https://dummyjson.com/products`, {
  19. method: &#39;GET&#39;,
  20. })
  21. .then(response =&gt; response.json())
  22. .then(responseJson =&gt; {
  23. this.setState({shops: responseJson})
  24. // console.warn(this.state.shops);
  25. })
  26. .catch(error =&gt; {
  27. {
  28. alert(error)
  29. }
  30. }),
  31. );
  32. }
  33. componentDidMount(){
  34. this.fetchItem()
  35. }
  36. render() {
  37. return (
  38. &lt;View style={{
  39. flex: 1,
  40. backgroundColor: &#39;#FFFFFF&#39;
  41. }}&gt;
  42. &lt;FlatList
  43. data = {
  44. this.state.shops
  45. }
  46. renderItem={({ item, index }) =&gt; 
  47. {
  48. return &lt;ShopListRow 
  49. shop={item} 
  50. index={index} 
  51. /&gt;}
  52. }
  53. keyExtractor={item =&gt; item.id}
  54. initialNumToRender={16}
  55. extraData={this.state}
  56. /&gt;
  57. &lt;/View&gt;
  58. );
  59. }
  60. }

And the ShopListRow Code is:

  1. import React, {Component} from &#39;react&#39;;
  2. import {
  3. View,
  4. Text,
  5. StyleSheet,
  6. TextInput,
  7. TouchableHighlight,
  8. FlatList,
  9. Image
  10. } from &#39;react-native&#39;
  11. //import Stars from &#39;./Stars&#39;;
  12. export default class ShopListRow extends Component {
  13. render() {
  14. const {
  15. shop,
  16. index
  17. } = this.props
  18. return (
  19. &lt;View key={shop.id} style={{ backgroundColor: index % 2 === 0 ? &#39;white&#39; : &#39;#F3F3F7&#39; }}&gt;
  20. &lt;View style={styles.row}&gt;
  21. &lt;View &gt;
  22. &lt;Text&gt;{shop.title}&lt;/Text&gt;
  23. &lt;Text &gt;{shop.description}&lt;/Text&gt;
  24. &lt;/View&gt;
  25. &lt;View style={styles.edges}&gt;
  26. &lt;TouchableHighlight 
  27. //onPress={this.infoPressed}
  28. style={styles.button}
  29. underlayColor=&#39;#5398DC&#39;
  30. &gt;
  31. &lt;Text style={styles.buttonText}&gt;Info&lt;/Text&gt;
  32. &lt;/TouchableHighlight&gt;
  33. &lt;/View&gt;
  34. &lt;/View&gt;
  35. &lt;/View&gt;
  36. )
  37. }
  38. }
  39. const styles = StyleSheet.create({
  40. row: {
  41. flexDirection: &#39;row&#39;
  42. },
  43. edges: {
  44. flex: 1,
  45. alignItems: &#39;center&#39;,
  46. justifyContent: &#39;center&#39;,
  47. padding: 5,
  48. minWidth: 50
  49. },
  50. stars: {
  51. flex: 1,
  52. alignItems: &#39;center&#39;,
  53. flexDirection: &#39;row&#39;,
  54. justifyContent: &#39;flex-start&#39;,
  55. padding: 5,
  56. minWidth: 50
  57. },
  58. nameAddress: {
  59. flexDirection: &#39;column&#39;,
  60. flex: 8,
  61. padding: 5
  62. },
  63. addressText: {
  64. color: &#39;grey&#39;
  65. },
  66. button: {
  67. borderWidth: 1,
  68. borderColor: &#39;#0066CC&#39;,
  69. borderRadius: 14,
  70. paddingHorizontal: 10,
  71. paddingVertical: 3,
  72. backgroundColor: &#39;#fff&#39;,
  73. },
  74. buttonText: {
  75. color: &#39;#0066CC&#39;,
  76. fontSize: 12
  77. },
  78. info: {
  79. marginHorizontal: 40,
  80. marginVertical: 10,
  81. padding: 10,
  82. backgroundColor: &#39;#fff&#39;,
  83. borderWidth: 1,
  84. borderColor: &#39;#ddd&#39;,
  85. borderRadius: 4
  86. }
  87. })

if anyone can help me why flatlist results not shown any results i will be thankful...
best regards

答案1

得分: 0

来自 https://dummyjson.com/products 的响应是一个对象。

  1. {
  2.      products: [....]
  3.  }

在你的 ShopList 组件中，你将商店的数组设置为一个对象。更新你的获取物品函数，使用产品数组。

  1. fetchItem() {
  2.   requestAnimationFrame(() =>
  3.     fetch(`https://dummyjson.com/products`, {
  4.       method: 'GET',
  5.     })
  6.       .then(response => response.json())
  7.       .then(responseJson => {
  8.         this.setState({shops: responseJson.products}) // &lt;--- 这里
  9.       })
  10.       .catch(error => {
  11.         {
  12.           alert(error)
  13.         }
  14.       }),
  15.   );
  16. }
英文:

The response from https://dummyjson.com/products is an object.

  1. {
  2. products: [....]
  3. }

In your ShopList component, you're setting the shop's array to an object. Update your fetch items function and use the products array.

  1. fetchItem() {
  2. requestAnimationFrame(() =&gt;
  3. fetch(`https://dummyjson.com/products`, {
  4. method: &#39;GET&#39;,
  5. })
  6. .then(response =&gt; response.json())
  7. .then(responseJson =&gt; {
  8. this.setState({shops: responseJson.products}) // &lt;--- here
  9. })
  10. .catch(error =&gt; {
  11. {
  12. alert(error)
  13. }
  14. }),
  15. );
  16. }

huangapple
  • 本文由 发表于 2023年5月28日 21:27:27
  • 转载请务必保留本文链接：https://go.coder-hub.com/76351737.html
  • flatlist
  • javascript
  • react-native
  • typescript
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定