React - Flatlist不呈现任何内容

Question

我有一个React-Native项目，它呈现一个项目列表。

我使用.map函数来做到这一点，但由于我将来会有几个项目，我正在尝试将该函数迁移到flatlist。

React提供的文档很简单，但我无法使用它。有什么想法吗？

这是我的代码：

renderEtiquetas() {

        // this commented code works just fine
        // return this.props.etiquetas.map(etiqueta =>
        //   <EtiquetaDetail key={etiqueta.id} etiqueta={etiqueta} galleries={ this.props.galleries } />
        // );

        <FlatList
          data={ this.props.etiquetas }
          keyExtractor={etiqueta => etiqueta.id}
          renderItem={({ etiqueta }) => (
            <EtiquetaDetail key={etiqueta.id} etiqueta={etiqueta} galleries={ this.props.galleries } />
          )}
        />

  }

这里是this.props.etiquetas的内容有这样的格式：[{...}，{...}，{...}，{...}，{...}，{...}，{...}，{...}]这里是其中一个对象：{id：523，日期：“2014-04-16T16：30：03”，date_gmt：“2014-04-16T16：30：03”，修改时间：“2018-01-13T00：00 ：43" }

谢谢你的时间！

Answer 1

根据我的经验。 Flatlist会将您的数据用于renderItem。

将您的flatlist标记更改为

    <FlatList
      data={ this.props.etiquetas }
      keyExtractor={etiqueta => etiqueta.id}
      renderItem={({ item }) => (
        <EtiquetaDetail key={item.id} etiqueta={item} galleries={ this.props.galleries } />
      )}
    />

如果您想要正确地重新渲染Flatlist。将extraData = {this.state}添加到其中。

Answer 2

问题是我在https://facebook.github.io/react-native/docs/flatlist.html之前错过了返回词。另外，我尝试了extraData = {this.state}但没有做任何事情。

谢谢@Chao Chen回答！

Answer 3

使用FlatList是明智之举，因为它具有更好的性能提升

我遇到了同样的问题，我用return (<MyComponent />)解决了它

在renderItem功能

因为在没有返回的情况下编写组件是行不通的，这里有一个小例子

            <FlatList 
            data={citiesLabelsAndNumbers.map(x=>x.city)}
            renderItem={({item}) => {
                return (<HorizontalCard text={item} onPress={()=>{}} />)
            }}
            keyExtractor={(item,index) => String(index)}
            />