reactjs - useReducer + Context api + useEffect = 无限循环

Question

我正在尝试使用 useReducer 和 context api 进行练习，但是当尝试执行返回数据的函数时，我得到了一个无限循环
reducer .js

const initialStore = {
  disabledAddButton: false,
  disabledDelButton: false,
  user: null,
  total_purchase: 0,
  cart: [],
  tasks: [],
}

const reducer = (state, action) => {
  switch (action.type) {
    case TYPES.USER_GET_TASKS: {
      return {
        ...state,
        tasks: action.payload,
      }
    }
    default:
      return state
   }
 }

用户提供者.js

const UserContext = createContext()

const UserProvider = ({ children }) => {
 
  const [store, dispatch] = useReducer(reducer, initialStore)

const getTasks = async () => {
    try {
      const response = await db.collection('tasks').get()
      const arrayData = response.docs.map(doc => ({
        id: doc.id,
        ...doc.data(),
      }))

      dispatch({
        type: TYPES.USER_GET_TASKS,
        payload: arrayData,
      })
    } catch (error) {
      console.log(error)
    }
  }
const value = {
    store,
    getTasks,
    dispatch,
  }
  return <UserContext.Provider value={value}>{children}</UserContext.Provider>
}

export { UserContext }
export default UserProvider

任务.js

const Tasks = () => {
  const { store, getTasks } = useContext(UserContext)
  const { tasks } = store
      
  useEffect(() => {
    getTasks()
  }, [])

  return (
    <div>
      {tasks.map(task => (
        <h2 key={task.id}>{task.name}</h2>
      ))}
    </div>
  )
}

export default Tasks

基本上问题是当我在任务组件上运行 getTasks() 时(在 useEffect 内部)我得到无限循环，我不知道为什么

Answer 1

这肯定与火力有关 db因为我无法通过 API 获取来复制该问题。
您可以从 UserProvider 最小化重新渲染通过使用 useMemo 和 useCallback .现在getTasks函数只会创建一次，而不是在每次渲染时重新创建。

const UserProvider = ({ children }) => {
  const [store, dispatch] = useReducer(reducer, initialStore);

  const getTasks = useCallback(async () => {
    try {
      const response = await db.collection("tasks").get();
      const arrayData = response.docs.map((doc) => ({
        id: doc.id,
        ...doc.data()
      }));
      dispatch({
        type: TYPES.USER_GET_TASKS,
        payload: arrayData
      });
    } catch (error) {
      console.log(error);
    }
  }, [dispatch]);

  const value = useMemo(
    () => ({
      store,
      getTasks,
      dispatch
    }),
    [store, getTasks, dispatch]
  );

  return <UserContext.Provider value={value}>{children}</UserContext.Provider>;
};

希望这有帮助!