Question

我正在尝试使用我的React Native组件中的FlatList呈现对象数据列表，但是我得到一个空白的屏幕，控制台上没有任何错误，这就是为什么它很难找到问题的根源这里。使用Redux-Saga方法将数据提供给组件，并将其提供给FlatList，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);

=============================================== ======

以下是控制台的屏幕截图，显示数据在组件中可用。

Answer 1

修改您的FlatList代码并重试

<FlatList
    data={dataSource}
    extraData={this.props}
    keyExtractor={this.keyExtractor}
/>

Answer 2

在动作中出现问题，我正在解雇readPostsActions而不是我应该解雇readMobilePostsActions - 它现在运行正常，谢谢大家所有的输入和帮助。

此致

Answer 3

您只需要在Flatlist中添加此样式：

<FlatList
   style={{height:'100%'}}
   data={dataSource}
   keyExtractor={this.keyExtractor}
   renderItem={this.renderItem}
 />

即使向组件提供数据（Array），FlatList也呈现为空白

3 个答案: