在 React useEffect 中添加依赖数据：解决并行性与性能难题

javascript

2024-03-12 05:34:27

在 React useEffect 中巧妙添加依赖数据

摘要

在 React 中使用 useEffect 钩子执行副作用时，添加新数据到依赖数组可能会带来挑战。本文深入探讨了相关问题及其解决方法，包括使用 useReducer、创建自定义操作、更新 useEffect 依赖项以及确保数据并行性等。

问题

在 React 应用程序中并行触发两个 API 调用，将这两个响应中的数据合并到同一个 reducer 中。但是，有时无法正常工作。

问题原因

状态更新不及时： useEffect 中的状态更新是异步的。
依赖关系不准确： useEffect 依赖数组仅包含两个 reducer 数据的原始引用。
数据并行性： 两个 API 调用是并行的，响应可能不会同时到达。

解决方案

使用 useReducer： useReducer 提供更精细的状态管理。它允许你指定一个 reducer 函数，接受当前状态和操作作为参数，并返回一个新的状态。

创建自定义操作： 对于合并数据，创建一个自定义操作，将两个 API 响应合并为一个新状态对象。

更新 useEffect 依赖项： 将合并操作的 dispatch 函数作为 useEffect 的依赖项。这样，每次合并操作完成时都会触发 useEffect 重新运行。

确保数据并行性： 如果需要确保数据并行性，可以使用 Promise.all() 函数来等待两个 API 响应同时完成，然后执行合并操作。

示例代码

const initialState = {
  resultFailData: [],
  studentInfo: [],
};

const reducer = (state, action) => {
  switch (action.type) {
    case "MERGE_DATA":
      return {
        ...state,
        resultFailData: action.payload.resultFailData,
        studentInfo: action.payload.studentInfo,
      };
    default:
      return state;
  }
};

const MergeData = () => {
  const [state, dispatch] = useReducer(reducer, initialState);

  useEffect(() => {
    const mergeData = async () => {
      const [resultFailData, studentInfo] = await Promise.all([
        // API calls to get resultFailData and studentInfo
      ]);

      dispatch({
        type: "MERGE_DATA",
        payload: { resultFailData, studentInfo },
      });
    };

    mergeData();
  }, [dispatch]);
};