Atlas Battery's questions

我在 React Native 应用程序中遇到了“超出最大更新深度”错误。当我取消注释 CropsGraph 组件中的 DropDownPicker 组件时，就会出现此问题。以下是我的应用程序流程：

我在 DataAnalysis.js 中获取 graphData 并将其作为 prop 传递给 CropsGraph.js。

在 CropsGraph.js 中，我处理 graphData 以生成图形数据并将其传递给 ChartScreen.js。

每当 graphData 或 selectedCrop 发生变化时，我都会使用 CropsGraph.js 中的 useEffect 来处理数据。

以下是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 },
});

如果我注释掉 DropDownPicker，该组件将正常工作而不会出现任何错误。

当我取消注释 DropDownPicker 时，出现“超出最大更新深度”错误。

尽管 graphData 和 selectedCrop 等依赖项很稳定，但控制台显示 useEffect 仍重复运行。

如何修复 DropDownPicker 导致的无限循环问题并确保 useEffect 仅在必要时运行？在 React Native 中是否有更好的方法来处理这种依赖于状态的数据处理？