即使将数据（数组）提供给组件，FlatList 也会呈现为空白
Posted
技术标签:
【中文标题】即使将数据（数组）提供给组件，FlatList 也会呈现为空白【英文标题】：FlatList rendering as blank even when the data(Array) is supplied to the component 【发布时间】：2018-05-07 06:40:43 【问题描述】：我试图在我的 React Native 组件中使用 FlatList 呈现对象数据列表，但是我在控制台上得到一个没有任何错误的空白屏幕，这就是为什么很难找到问题的根源这里。使用 Redux-Saga 方法将数据提供给组件，并提供给 FlatList 显示空白屏幕而没有任何错误。为了仔细检查 FlatList 是否工作正常，我在组件中做了一个模型数组并传递给 FlatList，它按预期呈现了 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);
================================================ ========
这是控制台的屏幕截图，显示数据在组件中可用。
【问题讨论】：
奇怪，尝试仅在 dataSource.length > 0 时渲染 FlatList 并在您的 FlatList 上添加 extraData=this.props.isLoading 【参考方案1】：修改您的 FlatList 代码并重试
<FlatList
data=dataSource
extraData=this.props
keyExtractor=this.keyExtractor
/>
【讨论】：
谢谢，添加extraData=this.props 无效。在我看来，当数据通过 Redux-Saga 道具可用时，组件的重新渲染不会发生。
除此之外，即使您的组件会重新渲染，您也需要添加 extraData 否则它将无法工作。
感谢您的输入，有趣的事实是，当我在组件中提供模拟数组时，它按预期工作。
我想你检查一下***.com/questions/50204947/…
感谢发送，请查看这些屏幕截图ibb.co/hAtU17 =>（数据使用 Redux Saga 道具提供）。另一个ibb.co/d9hiTn =>（当从组件本地提供数据时）【参考方案2】：
Actions 中存在问题，我正在解雇 readPostsActions 而我应该解雇 readMobilePostsActions - 现在它工作正常，谢谢大家在这里的所有输入和帮助。
问候
【讨论】：
【参考方案3】：您只需在 Flatlist 中添加此样式：
<FlatList
style=height:'100%'
data=dataSource
keyExtractor=this.keyExtractor
renderItem=this.renderItem
/>
【讨论】：
以上是关于即使将数据（数组）提供给组件，FlatList 也会呈现为空白的主要内容，如果未能解决你的问题，请参考以下文章
ReactNative FlatList 一次渲染所有项目？