Блог

Я использую набор диаграмм react native (BarChart). Всякий раз, когда набор данных становится больше, он выдает мне ошибку рендеринга. Вот мой код вместе с объяснением:

 class reportMainPage extends Component {
  selectedItemFromList = {};
  constructor(props) {
    super(props);
    this.state = {
      orderCount: 0,
      coatedInPcs: 0,
      coatedInFtage: 0,
      totalShippedPeices: 0,
      totalNoOfShipments: 0,
      selectedIndex: 0,
      totalHolidayRepairs: 0,
      totalPipeRejects: 0,
      chartOrderData: [],
      chartOrderHourlyData: [],
      chartOrderDetails: '',
      JSUORDERREF: 'JSU21266',
      loading: false,
      finalChartDetails: '',
      customerRepOrderArray: '',
      chosenDate: new Date(),
      date: moment(),
      datePicker: false,
      setDate: '',
    };
  }

  componentDidMount() {
    this.fetchTodayData();
    this.fetchDailyCoatedOrders();
    this.setTodayDate();
  }

  handleConfirm = async (date) => {
    this.setState({setDate: moment(date).format('YYYY-MM-DD')});
    var date1 = moment(date).format('YYYY-MM-DD');
    this.hideDatePicker();
    let data = await getDailyJsuOrderDetailsByDate(date1);
    data1 = data.data.recordset;
    this.setState({
      orderCount: data1[0].orderCount,
      coatedInFtage: data1[0].sumOfFootage,
      coatedInPcs: data1[0].sumOfPeices,
      totalNoOfShipments: data1[0].totalNoOfShipments,
      totalShippedPeices: data1[0].totalShippedPeices,
      totalPipeRejects: data1[0].dailyTotalRejections,
      totalHolidayRepairs: data1[0].totalHolidaysPerDay,
    });
    let res = await getDailyCoatedOrderDetailsByDate(date1);
    let response = res.data.recordset;
    this.setState({chartOrderDetails: response});
    jsuOrderData = [];
    for (let i in response) {
      let jsuOrderSet = {
        jsuOrder: '',
        itemNo: '',
        date: '',
      };
      jsuOrderSet.jsuOrder = response[i].jsuordref;
      jsuOrderSet.itemNo = response[i].itemno;
      jsuOrderSet.date = date1;
      jsuOrderData.push(jsuOrderSet);
    }
    this.setState({chartOrderData: jsuOrderData});
    this.fetchOrderTimeAndCountDetailsByDate(jsuOrderData);
  };

  fetchOrderTimeAndCountDetailsByDate = async (jsuOrderData) => {
    try {
      let finalChartData = [];
      for (let i in jsuOrderData) {
        let res = await getJsuOrderChartDataByDate(
          jsuOrderData[i].jsuOrder,
          jsuOrderData[i].itemNo,
          jsuOrderData[i].date,
        );
        if (res.code === 200) {
          let chartData = {
            labels: [],
            datasets: [
              {
                data: [],
              },
            ],
          };
          chartData.labels = res.hour;
          chartData.datasets[0].data = res.peices;
          finalChartData.push(chartData);
        }
      }
      this.setState({finalChartDetails: finalChartData}, function () {});
    } catch (error) {
      Alert.alert(
        'Error',
        'Something went wrong. Please Contact Administrator',
        [
          {
            text: 'OK',
            onPress: () => {
              this.setState({loading: false});
            },
          },
        ],
      );
    }
  };

  renderDailyOrderDetails = () => {
    try {
     const totalChartData = [];
        for (let i in this.state.chartOrderData) {
          totalChartData.push(
            <View style={{marginTop: wp(2)}}>
              
              <ScrollView horizontal={true}>
                <View style={{marginTop: wp(2)}}>
                  <BarChart
                    data={this.state.finalChartDetails[i]}
                    width={screenWidth}
                    height={225}
                    xAxisLabel=""
                    yAxisLabel=""
                    chartConfig={chartConfig}
                    fromZero="true"
                    showValuesOnTopOfBars="true"
                  />
                </View>
              </ScrollView>
              <View
                style={{
                  borderBottomColor: 'black',
                  borderBottomWidth: 0.5,
                }}
              />
            </View>,
          );
        }
        return totalChartData;     
    } catch (error) {
      console.log('-----------__________---this is the error');
      console.log(error);
    }
  };


  render() {
    return (
      <SafeAreaView style={styles.safeArea}>
          <ScrollView>
          <TouchableOpacity onPress={()=>{
            this.handleConfirm('03-05-2018');
          }} ><Text>Press</Text></TouchableOpacity>
            <View>      
              {this.renderDailyOrderDetails()}
            </View>
          </ScrollView>  
      </SafeAreaView>
    );
  }
}
 

если размер или длина этого.state.finalChartDetails больше 4 или 5, это приводит к ошибке.
это ошибка, которую я получаю. Может ли кто-нибудь, пожалуйста, сообщить мне, как преодолеть эту ошибку.

Изображение Ошибки