未捕获的语法错误：请求的模块'/context/WorkoutContext.jsx?t=1672368719868'不提供名为 'WorkoutContextProvider' 的导出

Question

这是我的WorkoutContext。Jsx’文件在上下文文件夹中。这会抛出一个错误…

Uncaught SyntaxError: The requested module '/context/WorkoutContext.jsx?t=1672368719868'没有提供名为'WorkoutContextProvider'的导出

import { createContext, useReducer } from 'react'
export const WorkoutsContext = createContext()
export const workoutsReducer = (state, action) => {
switch (action.type) {
case 'SET_WORKOUTS':
return { 
workouts: action.payload 
}
case 'CREATE_WORKOUT':
return { 
workouts: [action.payload, ...state.workouts] 
}
default:
return state
}
}
export const WorkoutsContextProvider = ({ children }) => {
const [state, dispatch] = useReducer(workoutsReducer, { 
workouts: null
})

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

Answer 1

设置WorkoutsContextProvider为默认导出:

const WorkoutsContextProvider = ({ children }) => {
const [state, dispatch] = useReducer(workoutsReducer, { 
workouts: null
})

return (
<WorkoutsContext.Provider value={{ ...state, dispatch }}>
{ children }
</WorkoutsContext.Provider>
)
}
export default WorkoutsContextProvider

，然后导入为:import WorkoutsContextProvider from "/context/WorkoutContext.jsx"

你应该在这里阅读javascript模块导入和导出:javascript模块小抄by Samantha Ming