從 MERN 堆棧中的兩個 Mongodb 數據庫中獲取數據

Question

在 MERN 堆棧應用程序中，我試圖從兩個 Mongodb 數據庫中獲取數據，並將它們存儲在上下文 state 中，但我只能根據它們的順序獲得一個或另一個。

App.js 。 在這種情況下，第二個useEffect掛鈎有效，但第一個無效。

import { useEffect } from 'react';
import { useClosetContext } from './hooks/useClosetContext';

function App() {
  const { dispatch } = useClosetContext()
  
  useEffect(() => {

    const fetchCloset = async () => {
      const response = await fetch('/api/closet')
      const json = await response.json()

      if (response.ok) {
        dispatch({type:'SET_CLOSET', payload: json})
      }
    }

    fetchCloset()
  
  }, [dispatch])

  useEffect(() => {

    const fetchSavedLists = async () => {
        const response = await fetch('/api/checklist')
        const json = await response.json()
  
        if (response.ok) {
          dispatch({type:'SET_CHECKLISTS', payload: json})
        }
      }

    fetchSavedLists()

  }, [dispatch])

  return (
    <div className="App">...</div>
  );
}

export default App;

我嘗試將fetchCloset()和fetchSavedLists()函數放在同一個useEffect掛鈎中，但我得到了相同的結果。

我也試過這個，但沒有得到任何東西：

useEffect(() => {
  const fetchData = () => {
      Promise.all([
        fetch('/api/closet'),
        fetch('/api/checklist')
      ]).then(([closet, checklist]) => {
        dispatch({type:'SET_CLOSET', payload: closet})
        dispatch({type:'SET_CHECKLISTS', payload: checklist})
      }).catch(err => {
        console.log(err)
      })
    }

  fetchData()
}, [dispatch])

這是我的上下文文件：

import { createContext, useReducer } from "react";

export const ClosetContext = createContext()

export const closetReducer = (state, action) => {
  switch (action.type) {
    case 'SET_CLOSET':
      return {
        closet: action.payload
      }
    case 'CREATE_GEAR':
      return {
        closet: [action.payload, ...state.closet]
      }
    case 'SET_CHECKLISTS':
      return {
        checklists: action.payload
      }
    case 'CREATE_CHECKLIST':
      return {
        checklists: [action.payload, ...state.checklists]
      }
    default:
      return state
  }
}

export const ClosetContextProvider = ({ children }) => {
  const [state, dispatch] = useReducer(closetReducer, {
    closet: null,
    checklists: null
  })

  return (
    <ClosetContext.Provider value={{...state, dispatch}}>
      { children }
    </ClosetContext.Provider>
  );
}

上下文掛鈎：

import { useContext } from "react";
import { ClosetContext } from "../context/ClosetContext";

export const useClosetContext = () => {
  const context = useContext(ClosetContext)

  if (!context) {
    throw Error('error')
  }

  return context
}

我認為后端沒有任何問題，因為我可以單獨獲取數據。 有什么方法可以獲取兩個數據庫並將它們設置為上下文 state？

Answer 1

問題出在你的減速器上：

    case 'SET_CLOSET':
      return {
        closet: action.payload
      }
    case 'SET_CHECKLISTS':
      return {
        checklists: action.payload
      }

你可能想要這樣的東西：

    case 'SET_CLOSET':
      return {
        ...state,
        closet: action.payload
      }
    case 'SET_CHECKLISTS':
      return {
        ...state,
        checklists: action.payload
      }

否則SET_CLOSET將刪除checklists ，而SET_CHECKLISTS將刪除closet 。