0

我想用 RecyclerListView 渲染我的数据，但它在第一次安装时没有显示数据。

我正在使用 API 获取数据，然后将其存储在 redux 存储中，然后将数据传递到 reducer，这些数据在 maptodispatchprops函数中列出。

数据看起来像这样：

[ {
        created_at: {
          nanoseconds: 0,
          seconds: 1632940200,
        },
        location: {
          latitude: 25.9277161,
          longitude: 86.7987091,
        },
        name: "hagemaru",
        orderId: "FZGf4UaDPm0kZpr4OQsM",
        order_items: [
          {
            id: 3,
            name: "Dummy Product 1",
            "price ": 60,
            quantity: 5,
            quantityPrice: 300,
          },
        ],
        order_status: "dispatched",
        phoneNumber: "+918603012345",
        userId: "LJelotGFFWRGCBiePF0beo1biWY2",
      }]

这是它的代码

import React, { Component } from "react";
import {
  Text,
  View,
  Dimensions,
  StyleSheet,
  ActivityIndicator,
} from "react-native";
import {
  RecyclerListView,
  DataProvider,
  LayoutProvider,
} from "recyclerlistview";
import RowRenderActive from "./RowRenderActive";
import { fetchPendingOrders } from "../../redux/orders/pendingOrders/actions";
import { connect } from "react-redux";
import { activeOrderItems } from "../../redux/orders/pendingOrders/activeOrdersSelector";

export class ActiveOrdersListView extends Component {
  constructor(props) {
    super(props);
    this.state = {
      fetchMore: false,
      dataProvider: new DataProvider((r1, r2) => {
        return r1 !== r2;
      }),
    };
  }
  width = Dimensions.get("window").width;
  height = Dimensions.get("window").height;

  componentDidMount() {
    let currentOrdersData = this.props.activeOrders.final_data;
    
    if (currentOrdersData.length !== 0) {
      this.setState({
        ...this.state,
        dataProvder: this.state.dataProvider.cloneWithRows(currentOrdersData),
        fetchMore: false,
      });
    }
  }

  layoutProvider = new LayoutProvider(
    (index) => {
      return index;
    },
    (type, dim) => {
      (dim.width = this.width * 0.85), (dim.height = this.height * 0.15);
    }
  );

  rowRenderer = (type, item) => {
    return (
      <>
        <RowRenderActive item={item} />
      </>
    );
  };

  render() {
    let dataLength = this.state.dataProvider._data.length !== 0;

    return (
      <>
        {dataLength ? (
          <RecyclerListView
            dataProvider={this.state.dataProvider}
            layoutProvider={this.layoutProvider}
            rowRenderer={this.rowRenderer}
          />
        ) : null}
      </>
    );
  }
}

mapStateToProps = (state) => {
  return {
    activeOrdersDoc: state.ActiveOrdersReducer,
    activeOrders: activeOrderItems(state),
  };
};

mapDispatchToProps = (dispatch) => {
  return {
    fetchMoreOrders: (docId) => dispatch(fetchPendingOrders(true, docId)),
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ActiveOrdersListView);
4

0 回答 0