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，日期：＆＃34; 2014-04-16T16：30：03＆＃34;，date_gmt：＆＃34; 2014-04-16T16：30：03＆＃34;，修改：＆＃34; 2018 -01-13T00：00：43＆＃34;}

谢谢你的时间！

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)}
            />

React - Flatlist不会渲染任何东西

3 个答案: