React native React native无法显示平面列表

我想显示我创建的

FlatList

。我想显示我的数据中的标题和艺术家。没有错误，但我的输出不会显示任何内容

这是我的数据：

var track =   
[ 
 { List: 'list1', 
   data: 
   [
   {id: '1', url: 'http://tegos.kz/new/mp3_full/Luis_Fonsi_feat._Daddy_Yankee_-_Despacito.mp3',title: 'Despacito',artist:'Luis Fonsi'},
   {id: '2', url: 'http://tegos.kz/new/mp3_full/5_Seconds_Of_Summer_-_Youngblood.mp3',title: 'YoungBlood',artist:'5SOS'},
 ]
},
 { List: 'list2', 
  data: 
[
  {id: '1111', url: 'http://tegos.kz/new/mp3_full/Yellow_Claw_and_San_Holo_-_Summertime.mp3',title: 'Summertime',artist:'Yelow Claw'},
  {id: '2222', url: 'http://tegos.kz/new/mp3_full/Post_Malone_-_Better_Now.mp3',title: 'Better Now',artist:'Post Malone'},
]},
];

module.exports = {track:track};

这是我的

平面列表

：

export default class SongList extends Component{
render(){
const { navigate } = this.props.navigation;
return(
    <View>
    <FlatList
    data={track}
    renderItem={({item,index})=>{
        return(
            <FlatListItem item={item} index={index}>

            </FlatListItem>);
    }}
    >
    </FlatList>
    </View>
);
 }
 }

class FlatListItem extends Component{
render(){

    return(
        <View style={styles.list}>
        <View>

        <Text style={styles.itemTitle}>{this.props.item.title}</Text>
        <Text style={styles.itemArtist}>{this.props.item.artist}</Text>
        </View>
        </View>
    );
}

---

您应该按照以下方式编写代码：

export default class App extends Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <FlatList
          data={track[0].data}
          renderItem={({ item, index }) => {
            return <FlatListItem item={item} index={index} />;
          }}
        />
      </View>
    );
  }
}

class FlatListItem extends Component {
  render() {
    return (
      <View style={styles.list}>
        <View>
          <Text style={styles.itemTitle}>{this.props.item.title}</Text>
          <Text style={styles.itemArtist}>{this.props.item.artist}</Text>
        </View>
      </View>
    );
  }
}

您的数据：

export default [
  {
    List: 'list1',
    data: [
      {
        id: '1',
        url: 'http://tegos.kz/new/mp3_full/Luis_Fonsi_feat._Daddy_Yankee_-_Despacito.mp3',
        title: 'Despacito',
        artist: 'Luis Fonsi',
      },
      {
        id: '2',
        url: 'http://tegos.kz/new/mp3_full/5_Seconds_Of_Summer_-_Youngblood.mp3',
        title: 'YoungBlood',
        artist: '5SOS',
      },
    ],
  },
  {
    List: 'list2',
    data: [
      {
        id: '1111',
        url: 'http://tegos.kz/new/mp3_full/Yellow_Claw_and_San_Holo_-_Summertime.mp3',
        title: 'Summertime',
        artist: 'Yelow Claw',
      },
      {
        id: '2222',
        url: 'http://tegos.kz/new/mp3_full/Post_Malone_-_Better_Now.mp3',
        title: 'Better Now',
        artist: 'Post Malone',
      },
    ],
  },
];

像这样导入数据，我假设数据文件和代码位于同一文件夹中：

import track from './data';

您的组件：

export default class App extends Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <FlatList
          data={track}
          renderItem={({ item, index }) => {
            return <FlatListItem item={item} index={index} />;
          }}
        />
      </View>
    );
  }
}

class FlatListItem extends Component {
  render() {
    return (
      <View style={styles.list}>
        <View>
          <Text style={styles.itemTitle}>{this.props.item.data[0].title}</Text>
          <Text style={styles.itemArtist}>{this.props.item.data[0].artist}</Text>
        </View>
        <View>
          <Text style={styles.itemTitle}>{this.props.item.data[1].title}</Text>
          <Text style={styles.itemArtist}>{this.props.item.data[1].artist}</Text>
        </View>
      </View>
    );
  }
}

您可以使数据架构更好地显示它们。

调试步骤：-

尝试控制台跟踪，检查数据是否正确进入

在componentDidMount中添加控制台，并检查项目是否出现

在flatlist中添加keyExtractor，keyExtractor告诉列表使用react键的ID而不是默认键属性

“”+index}
renderItem={（{item，index}）=>{
回来
}}
/>

请上载您的样式代码。上载了我的样式代码。但是如何仅显示列表1的数据？我只想表现出绝望和年轻的血统

export default class App extends Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <FlatList
          data={track[0].data}
          renderItem={({ item, index }) => {
            return <FlatListItem item={item} index={index} />;
          }}
        />
      </View>
    );
  }
}

class FlatListItem extends Component {
  render() {
    return (
      <View style={styles.list}>
        <View>
          <Text style={styles.itemTitle}>{this.props.item.title}</Text>
          <Text style={styles.itemArtist}>{this.props.item.artist}</Text>
        </View>
      </View>
    );
  }
}