项目在平面列表中不可见

Question

当我的平面列表被渲染时...我在渲染的Item函数中得到相同的项目（索引0处的项目），并且在我的单位列表中没有可见的数据。我是新来的反应原生...任何帮助将不胜感激。

这是我的包含Flat List的类，在Render item函数中，我将项目传递给另一个名为ListviewItem的组件。

import React,{Component} from 'react';
import {FlatList,Text} from 'react-native';
import {connect} from 'react-redux';
import ListItem from './LibraryList';


class LibraryList extends Component{


  componentWillMount(){
     console.log(this.props);
   }

   renderItem({item, index}) {
     console.log('render item called');
     console.log(item);
      return (
         <ListItem item={item} />
      );
    }


  render(){
    return(
      <FlatList
        data={this.props.libraries}
        renderItem={this.renderItem.bind(this)}
      />
    );
  }
}

const mapStateToProps = state =>{
  console.log(state.libraries);
  return {libraries:state.libraries};
}

export default connect(mapStateToProps)(LibraryList);

ListviewItem类

import React,{Component} from 'react';
import {Text} from 'react-native';
import {CardSection} from './common';

class ListviewItem extends Component {
    render(){
      return(
         <CardSection>
            <Text>{this.props.item.title}</Text>
         </CardSection>
      );
    }
}

export default ListviewItem;

Answer 1

请试试这个：

<View>
   <FlatList
       data={this.props.libraries}
       renderItem={({ item }) => (
              <ListItem item={item} />
       )}
    />
</View>

这样的项目：

import React,{Component} from 'react';
import {Text} from 'react-native';
import {CardSection} from './common';

class ListItem extends Component {
    render(){
      return(
         <View>
            <Text>{this.props.item.title}</Text>
         </View>
      );
    }
}

export default ListItem;

首先从列表项中删除CardSection，检查是否有效，如果这有效，请查看CardSection，其中添加了一些包含其父级道具的文本。

Answer 2

尝试以下操作：

import React,{Component} from 'react';
import {Text} from 'react-native';
import {CardSection} from './common';

class ListviewItem extends Component {
    render(){
      return(
         <CardSection>
            <Text>{this.props.item.item.title}</Text>
         </CardSection>
      );
    }
}

export default ListviewItem;