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

Question

我正在使用Axios从服务器获取 dataList 并将其作为数组存储在状态中。我想使用LazyList，但在文档中，没有props用于从服务器获取动态数据数组，类似于dataSourceList 组件，但在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>

Answer 1

您必须删除数据源。并将数组的长度放在长度属性中。使用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}
      />