Question

我需要有关如何构建与FlatList相同反应方式的组件的建议。或者也许有一个准备好的工具可以在react JS中做到这一点。这是我的react native的简单FlatList：

             <FlatList

             data={this.props.list_data}
             horizontal={false}

             renderItem={this.renderItemList}

             keyExtractor={(item, index) => index.toString() }
             refreshing={this.state.refreshing}
             onRefresh={() => this.props.onRefresh()}
                  / >

在反应本地FlatList中，它获取作为对象的数据并呈现一个列表。那么我该如何用react js list做同样的行为呢？那样做

           const listarray = Object.values(this.props.data)
          return (
            <ul >
            {listarray.map(function(item) {
               return <li key={item}>{item}</li>;
                   })}
                </ul>   )

这样我会收到此错误：

          Encountered two children with the same key, `[object Object]`. 
          Keys should be unique so that components maintain their 
          identity 
          across updates. Non-unique keys may cause children to be 
          duplicated and/or omitted — the behavior is unsupported and 
          could change in a future version.

Answer 1

在您的示例中，您可能有2个完全相同的项目。

只需将其他内容用作每个项目的键。

如错误所言，.map中的2个组件不能使用相同的键。最简单的方法是使用索引。

 {listarray.map(function(item,index) {
           return <li key={index}>{item}</li>;
               })}

是否有任何组件可以在ReactJs中渲染与React native中的FlatList等效的列表？

1 个答案: