React组件中不同useEffect间的变量通信问题

核心方案：使用useRef存储跨useEffect的数据 #

useRef可以存储组件生命周期内的可变值，更新不会触发重渲染，完美适配你不能使用useState的场景。

具体实现代码 #

import React, { useEffect, useRef } from 'react';
// 假设你的类图表组件
import ClassChart from './ClassChart';

const YourComponent = () => {
  // 用useRef存储请求到的数据，初始值为null
  const dataRef = useRef(null);

  // 第一个useEffect：获取Cookie并发起请求
  useEffect(() => {
    const fetchAndStoreData = async () => {
      // 1. 获取Cookie
      const cookie = document.cookie;
      // 2. 发起请求
      try {
        const response = await fetch('你的API地址', {
          headers: {
            'Cookie': cookie,
            'Content-Type': 'application/json'
          }
        });
        // 3. 解析JSON数据（注意await，因为response.json()是异步操作）
        const fetchedData = await response.json();
        // 4. 将数据存入useRef
        dataRef.current = fetchedData;
      } catch (error) {
        console.error('请求失败:', error);
      }
    };

    fetchAndStoreData();
  }, []); // 空依赖，仅组件挂载时执行一次

  // 第二个useEffect：基于数据执行求和、筛选等运算
  useEffect(() => {
    // 确保数据已存在再执行运算
    if (!dataRef.current) return;

    const operationData = { ...dataRef.current }; // 复制数据避免直接修改原引用
    // 执行求和、筛选逻辑
    const sum = operationData.list.reduce((acc, item) => acc + item.value, 0);
    const filteredData = operationData.list.filter(item => item.status === 'active');

    console.log('求和结果:', sum);
    console.log('筛选后数据:', filteredData);
    // 如果运算结果需要传递给类图表组件，可以直接操作（比如调用类组件的方法）
    // 假设ClassChart有ref，可以通过chartRef.current.updateData(filteredData)
  }, []); // 这里如果需要数据更新时重新执行，可结合一个触发状态，或者直接在第一个useEffect调用运算函数

  // 渲染类图表组件，这里可以直接传递dataRef.current（因为useRef不触发重渲染，类组件如果需要更新可能需要手动调用方法）
  return <ClassChart initialData={dataRef.current} />;
};

export default YourComponent;

补充说明 #

1. 关于异步处理：response.json()是异步方法，必须用await等待解析完成，否则dataRef.current会存储一个Promise对象，而非实际的JSON数据。
2. 运算逻辑的触发时机：如果希望数据更新时自动执行运算，可以在第一个useEffect获取到数据后直接调用运算函数，或者添加一个仅用于触发的状态变量（该变量不传递给类图表组件，就不会影响其初始值读取）：

// 新增一个仅用于触发的状态
const [dataLoaded, setDataLoaded] = useState(false);

// 第一个useEffect里设置状态
dataRef.current = fetchedData;
setDataLoaded(true);

// 第二个useEffect依赖dataLoaded
useEffect(() => {
  if (!dataRef.current) return;
  // 运算逻辑
}, [dataLoaded]);

这种方式下，状态变量仅用于触发运算，不会传递给类图表组件，避免了其读取初始null值的问题。
3. 类组件的数据更新：如果类图表组件需要在数据获取后更新，可以给类组件添加ref，通过ref.current调用类组件内部的更新方法，而非依赖props传递触发重渲染。

内容的提问来源于stack exchange，提问作者user20130310