Início / user-29179122

Atlas Battery's questions

Martin Hope
Atlas Battery
Asked: 2025-01-13 22:23:06 +0800 CST
  • 4

Estou enfrentando um erro "Profundidade máxima de atualização excedida" no meu aplicativo React Native. O problema ocorre quando descomento o componente DropDownPicker no meu componente CropsGraph. Aqui está o fluxo do meu aplicativo:

Eu busco graphData em DataAnalysis.js e o passo como um prop para CropsGraph.js.

No CropsGraph.js, eu processo o graphData para gerar dados para gráficos e os passo para o ChartScreen.js.

Eu uso useEffect em CropsGraph.js para processar os dados sempre que graphData ou selectedCrop mudam.

Aqui está o código relevante para CropsGraph.js:

import React, { useEffect, useState, useCallback } from 'react';
import { ScrollView, StyleSheet, Text, View } from 'react-native';
import ChartScreen from './ChartScreen';
import DropDownPicker from 'react-native-dropdown-picker';
import { transformData, processBarData } from '../../../config/HelperFunction/index';

export const CropsGraph = ({ graphData }) => {
  const [graphState, setGraphState] = useState({
    data: null,
    years: [],
    feedback: '',
    graphs: [],
  });
  const [cropOpen, setCropOpen] = useState(false);
  const [selectedCrop, setSelectedCrop] = useState(3);
  const colors = ['#FFA500', '#2e8b57', '#9F2B68'];

  const processGraphData = useCallback((key, firstYearData, secondYearData, thirdYearData) => {
    const keyUnits = {
      COST: '(RS.)',
      CULTIVATED_AREA: '(ACRE)',
      YIELD: '(MOUND/ACRE)',
      TOTAL_PRODUCTION: '(MOUND)',
      CASHFLOW: '(RS.)',
      RATE: '(RS.)',
    };
    const result = processBarData(key, firstYearData, secondYearData, thirdYearData, colors);
    const unit = keyUnits[key] || '';
    return {
      data: result.data,
      max: result.maxValue,
      sections: result.numberOfSections,
      title: `${key.replace(/_/g, ' ')} ${unit}`,
    };
  }, []);

  const updateGraphState = useCallback(() => {
    if (graphData && Object.keys(graphData).length > 0) {
      const keys = Object.keys(graphData);
      const years = keys;

      let firstYearData = graphData[keys[0]]?.[selectedCrop]
        ? transformData(graphData[keys[0]][selectedCrop])
        : null;

      let secondYearData = graphData[keys[1]]?.[selectedCrop]
        ? transformData(graphData[keys[1]][selectedCrop])
        : null;

      let thirdYearData = graphData[keys[2]]?.[selectedCrop]
        ? transformData(graphData[keys[2]][selectedCrop])
        : null;

      const feedback =
        thirdYearData?.FEEDBACK || secondYearData?.FEEDBACK || firstYearData?.FEEDBACK || '';

      const graphKeys = [
        'COST',
        'CULTIVATED_AREA',
        'RATE',
        'YIELD',
        'TOTAL_PRODUCTION',
        'CASHFLOW',
      ];

      const graphs = graphKeys.map((key) =>
        processGraphData(key, firstYearData, secondYearData, thirdYearData)
      );

      setGraphState({ data: graphData, years, feedback, graphs });
    } else {
      setGraphState({ data: null, years: [], feedback: '', graphs: [] });
    }
  }, [graphData, selectedCrop, processGraphData]);

  useEffect(() => {
    updateGraphState();
  }, [graphData, selectedCrop, updateGraphState]);

  return (
    <View style={styles.safeAreaStyle}>
      <ScrollView>
        <DropDownPicker
          placeholder="Select Crop"
          open={cropOpen}
          value={selectedCrop}
          setOpen={setCropOpen}
          setValue={setSelectedCrop}
        />
        {graphState.graphs.map((graph, index) =>
          graph.data.length > 0 ? (
            <View key={index} style={styles.chartContainer}>
              <Text style={styles.chartTitle}>{graph.title}</Text>
              <ChartScreen
                barData={graph.data}
                numberOfSections={graph.sections}
                max={graph.max}
                years={graphState.years}
                feedback={graphState.feedback}
              />
            </View>
          ) : (
            <View key={index} style={styles.emptyContainer}>
              <Text>No Data Available for {graph.title}</Text>
            </View>
          )
        )}
      </ScrollView>
    </View>
  );
};

const styles = StyleSheet.create({
  safeAreaStyle: { flex: 1, backgroundColor: 'white' },
  chartContainer: { marginVertical: 15 },
  chartTitle: { fontSize: 18, fontWeight: 'bold', marginBottom: 5, textAlign: 'center' },
  emptyContainer: { flex: 1, justifyContent: 'center', alignItems: 'center', padding: 16 },
});

Se eu comentar o DropDownPicker, o componente funciona bem, sem erros.

Quando descomento o DropDownPicker, recebo o erro "Profundidade máxima de atualização excedida".

O console mostra que useEffect é executado repetidamente, mesmo que dependências como graphData e selectedCrop sejam estáveis.

Como posso corrigir o problema de loop infinito causado pelo DropDownPicker e garantir que meu useEffect seja executado somente quando necessário? Existe uma maneira melhor de lidar com esse tipo de processamento de dados dependente de estado no React Native?

reactjs