Javascript 即使将数据（数组）提供给组件，平面列表也呈现为空白
我试图在我的React Native组件中使用FlatList呈现对象数据列表，但是我在控制台上得到了一个没有任何错误的空白屏幕，这就是为什么在这里很难找到问题的根源。使用Redux-Saga方法将数据提供给组件，并将其提供给显示空白屏幕且无任何错误的平面列表。为了再次检查平面列表是否工作正常，我在组件中创建了一个模型数组，并将其传递给平面列表，该平面列表按预期呈现UI。下面是我在这里使用的代码 =======================================================Javascript 即使将数据（数组）提供给组件，平面列表也呈现为空白,javascript,android,ios,reactjs,react-native,Javascript,Android,Ios,Reactjs,React Native,我试图在我的React Native组件中使用FlatList呈现对象数据列表，但是我在控制台上得到了一个没有任何错误的空白屏幕，这就是为什么在这里很难找到问题的根源。使用Redux-Saga方法将数据提供给组件，并将其提供给显示空白屏幕且无任何错误的平面列表。为了再次检查平面列表是否工作正常，我在组件中创建了一个模型数组，并将其传递给平面列表，该平面列表按预期呈现UI。下面是我在这里使用的代码 ==================================================
class Mobile extends Component {
componentDidMount() {
let { readPostsAction } = this.props;
readPostsAction();
}
renderItem = ({ item }) => {
return (
<View>
<TouchableOpacity onPress={() => this.props.navigation.navigate('HomeDetails', { item })}>
<Card>
<CardItem header>
<Text style={styles.titleHeading}>{item.title}</Text>
</CardItem>
<CardItem cardBody>
<Content style={styles.cardContainer}>
<CustomCachedImage
component={FitImage}
source={{ uri: contentURL(item.attachments[0].url) }}
style={{ width: width, height: 200 }}
/>
<HTML tagsStyles={bodyText} html={reduceStringLength(contentText(item.excerpt))} />
</Content>
</CardItem>
</Card>
</TouchableOpacity>
</View>
)
}
keyExtractor = (item, index) => item.id;
render() {
const { dataSource } = this.props;
console.log('this.props', this.props);
return (
<View>
<FlatList
data={dataSource}
keyExtractor={this.keyExtractor}
renderItem={this.renderItem}
/>
</View>
);
}
}
function mapStateToProps({ launchAppReducer }) {
return {
isLoading: launchAppReducer.isLoading,
dataSource: launchAppReducer.data
}
}
export default connect(mapStateToProps, { readPostsAction: actions.readPostsAction })(Mobile);
class移动扩展组件{
componentDidMount（）{
设{readPostsAction}=this.props；
readPostsAction（）；
}
renderItem=（{item}）=>{
返回(
this.props.navigation.navigate（'HomeDetails'，{item}）}>
{item.title}
)
}
keyExtractor=（项，索引）=>item.id；
render（）{
const{dataSource}=this.props；
console.log（'this.props'，this.props）；
返回(
);
}
}
函数MapStateTops（{launchAppReducer}）{
返回{
isLoading:启动Appreducer.isLoading，
数据源：launchAppReducer.data
}
}
导出默认连接（MapStateTops，{readPostsAction:actions.readPostsAction}）（移动）；
class Mobile extends Component {
componentDidMount() {
let { readPostsAction } = this.props;
readPostsAction();
}
renderItem = ({ item }) => {
return (
<View>
<TouchableOpacity onPress={() => this.props.navigation.navigate('HomeDetails', { item })}>
<Card>
<CardItem header>
<Text style={styles.titleHeading}>{item.title}</Text>
</CardItem>
<CardItem cardBody>
<Content style={styles.cardContainer}>
<CustomCachedImage
component={FitImage}
source={{ uri: contentURL(item.attachments[0].url) }}
style={{ width: width, height: 200 }}
/>
<HTML tagsStyles={bodyText} html={reduceStringLength(contentText(item.excerpt))} />
</Content>
</CardItem>
</Card>
</TouchableOpacity>
</View>
)
}
keyExtractor = (item, index) => item.id;
render() {
const { dataSource } = this.props;
console.log('this.props', this.props);
return (
<View>
<FlatList
data={dataSource}
keyExtractor={this.keyExtractor}
renderItem={this.renderItem}
/>
</View>
);
}
}
function mapStateToProps({ launchAppReducer }) {
return {
isLoading: launchAppReducer.isLoading,
dataSource: launchAppReducer.data
}
}
export default connect(mapStateToProps, { readPostsAction: actions.readPostsAction })(Mobile);
这是控制台的屏幕截图，显示数据在组件中可用。修改平面列表代码，然后重试
<FlatList
data={dataSource}
extraData={this.props}
keyExtractor={this.keyExtractor}
/>
在操作中出现了问题，我启动了
readPostsActionsreadMobilePostsActions关于您只需在平面列表中添加此样式：
<FlatList
style={{height:'100%'}}
data={dataSource}
keyExtractor={this.keyExtractor}
renderItem={this.renderItem}
/>
extraData={this.props}