Javascript 项目在平面列表中不可见
当呈现平面列表时…我在呈现项函数中获取相同的项(索引为0的项),并且平面列表中没有可见的数据。我是新来的…任何帮助将不胜感激 这是我的类,它包含平面列表,在Render item函数中,我将该项传递给另一个名为ListviewItem的组件。Javascript 项目在平面列表中不可见,javascript,react-native,react-redux,Javascript,React Native,React Redux,当呈现平面列表时…我在呈现项函数中获取相同的项(索引为0的项),并且平面列表中没有可见的数据。我是新来的…任何帮助将不胜感激 这是我的类,它包含平面列表,在Render item函数中,我将该项传递给另一个名为ListviewItem的组件。 import React,{Component}来自'React'; 从“react native”导入{FlatList,Text}; 从'react redux'导入{connect}; 从“/LibraryList”导入列表项; 类库列表扩展了组件{
import React,{Component}来自'React';
从“react native”导入{FlatList,Text};
从'react redux'导入{connect};
从“/LibraryList”导入列表项;
类库列表扩展了组件{
组件willmount(){
console.log(this.props);
}
renderItem({item,index}){
log('render item called');
控制台日志(项目);
返回(
);
}
render(){
返回(
);
}
}
常量mapStateToProps=状态=>{
console.log(state.libraries);
返回{libraries:state.libraries};
}
导出默认连接(MapStateTops)(库列表);
ListviewItem类
import React,{Component}来自'React';
从“react native”导入{Text};
从“/common”导入{CardSection};
类ListviewItem扩展组件{
render(){
返回(
{this.props.item.title}
);
}
}
导出默认ListviewItem;
请尝试以下方法:
<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;
import React,{Component}来自'React';
从“react native”导入{Text};
从“/common”导入{CardSection};
类ListItem扩展组件{
render(){
返回(
{this.props.item.title}
);
}
}
导出默认列表项;
因此,首先从列表项中删除CardSection,检查是否有效,如果有效,请查看CardSection
,在其中添加一个文本,其中包含来自其父项的一些道具。尝试此项:
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;
import React,{Component}来自'React';
从“react native”导入{Text};
从“/common”导入{CardSection};
类ListviewItem扩展组件{
render(){
返回(
{this.props.item.item.title}
);
}
}
导出默认ListviewItem;
用视图包装平面列表,并将样式设置为该视图<代码>您的平面列表已尝试…未成功:(this.props.libraries不为空?不,它不为空..数据在那里…但在渲染函数中,只有索引0处的项正在提交,且平面列表也不可见。它正在打印的项是什么,调用了多少次?确保正确导入是的,我已检查您的代码…它不工作…:(嗯,我正在使用这个代码,它对我有效。你能提供一些关于这个.props.libraries
的详细信息吗?我只收到这个警告->虚拟化列表缺少项目的键确保在每个项目上指定一个键属性你可以在->snack.expo.io/@neeraj010133/teck_堆栈中检查我的代码
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;
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;