javascript - 项目在平面列表中不可见

Question

当我的平面列表被渲染时...我在渲染的 Item 函数中得到相同的项目(索引 0 处的项目)，并且在我的平面列表中没有可见数据。我是本地 react 新手...任何帮助将不胜感激。

这是我的类，其中包含平面列表，在渲染项目函数中，我将项目传递给另一个我命名为 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，其中添加了一个文本，其中包含来自其父项的一些 Prop 。