react-onsenui中如何使用LazyList组件显示动态数据？答案

【问题标题】：How to use LazyList component in react-onsenui to display dynamic data?react-onsenui中如何使用LazyList组件显示动态数据？
【发布时间】：2020-06-29 14:33:33
【问题描述】：

我正在使用Axios 从服务器获取数据列表并将其作为数组存储在状态中。我想使用LazyList，但在文档中，没有props 用于从服务器获取动态数据数组，类似于List 组件中的dataSource，但在LazyList 中我只能看到第1 项、第2 项。 .. 有没有办法在LazyList 中显示动态数据响应？

我想像下面的代码一样运行服务器的长数组列表，但它不起作用。

<div style={{height: 100}}>
      <Ons.LazyList
        dataSource={[{id:1,name:"maryam"],{id:2,name:"mary"}]}
        length={100}
        renderRow={(user) => (
  <Ons.ListItem>
       {user.name}
  </Ons.ListItem>
        calculateItemHeight={() =>44}
      />
</div>

【问题讨论】：

标签： reactjs onsen-ui lazylist

【解决方案1】：

您必须删除数据源。并将数组的长度放在length属性中。在renderRow中使用ListItem中的索引放置动态数据。

const data = [{id:1,name:"maryam"],{id:2,name:"mary"}]

 <div style={{ textAlign: 'center' }}>
      <LazyList
        modifier="inset"
        length={data.length}
        renderRow={index => (
          <ListItem
            key={index}
          >
            {data[index].name}
          </ListItem>
        )}
        calculateItemHeight={() => 44}
      />

【讨论】：