NextJs 未处理的运行时错误：元素类型无效

Question

我正在根据 1 年前发布的 YouTube 教程创建一个 Instagram 克隆。由于nextjs14有很多错误，我已经解决了所有人，直到这个错误： 错误：元素类型无效：需要一个字符串（对于内置组件）或一个类/函数（对于复合组件），但得到：对象。

检查RootLayout的render方法。

GlobalContext.js 的代码是

import { globalReducer } from "../reducers/globalReducer";

const initialState = {
    user:{},
    isAuthenticated: false,
    isOnboarded: false,
    isLoading: false,
}

export const GlobalContext = createContext(initialState);
export const GlobalDispatchContext = createContext(null);

const GlobalContextProvider = ({ children }) => {

    const [state, dispatch] = useReducer(globalReducer, initialState)

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

export default GlobalContextProvider; 

layout.js 的代码是

import "./globals.css";
import GlobalContextProvider from "./state/context/GlobalContext";

export default function RootLayout( Component, pageProps ) {
  return (
    <GlobalContextProvider>
      <Component {...pageProps} />
    </GlobalContextProvider>
  );
}

经我检查，所有导入和导出都是正确的。有什么解决办法吗？

我解决了layout.js不是CSR，但是解决之后却显示这个错误。

Answer 1

layout.js

的第一个 props 是 React Children，第二个是 params。

所以你的

layout.js

函数应该是这样的：

export default function RootLayout({
  children,
  params,
}

现在，您正在使用：

<Component {...pageProps} />

当然你会得到错误。因为

Component

不是有效的

React component

。请记住，

layout.js

的第一个 props 是

react children

，而不是组件。

查看官方文档了解更多信息