堆棧內存溢出
  簡體   English   中英

React/Next.js 對象不是函數

[英]React/Next.js Object is not a function

 原文  2018-04-25 09:47:12  7   4    javascript/ reactjs/ next.js

問題描述

我正在使用 Next.js 來呈現應用程序。 在我的頁面中，我有 /index 包裹在我的儀表板布局中。 這工作得很好，沒有任何問題。

我的頁面中還有 /item 和 /add-item ，它們也包含在我的儀表板布局中，但是當我調用除 /index 之外的任何內容時，我收到以下錯誤：

TypeError: Object(...) is not a function
    at Object../pages/index/index.js (C:\Users\User\Documents\Projects\Project\project-next\src\.next\dist\bundles\pages\item.js:2837:138)

令我困惑的是，當直接轉到 /index 工作正常時，為什么 /item 在 /index 失敗。 如果我像這樣注釋掉 /index 中的導出，那么轉到 /item 或包含在儀表板中的任何其他頁面都可以工作：

//export default Dashboard(Index);

我的文件如下：

/布局/儀表板/index.js

import React from 'react';
import Head from 'next/head';
import hoistNonReactStatics from 'hoist-non-react-statics';

import Header from './Header';
import Sidebar from './Sidebar';
import Login from '../../pages/login';

import checkUser from '../../utils/checkUser';
import redirect from '../../utils/redirect';

import './normalize.less';
import styles from './styles.less';

const Dashboard = ComposedComponent => {
  class Decorator extends React.Component {
    static async getInitialProps(ctx) {
      const props = {
        isAuthenticated: true,
        data: {
          name: 'dave',
        },
      };
      return props;
    }

    render() {
      if (!this.props.isAuthenticated) {
        return <Login />;
      }

      const layout = children => (
        <React.Fragment>
          <Head>
            <title>Project</title>
            <link
              href="https://fonts.googleapis.com/css?family=Roboto:300,400,500"
              rel="stylesheet"
            />
            <link
              rel="stylesheet"
              href="https://unpkg.com/antd@3/dist/antd.min.css"
            />
            <link
              rel="apple-touch-icon"
              sizes="57x57"
              href="../static/icons/apple-icon-57x57.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="60x60"
              href="../static/icons/apple-icon-60x60.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="72x72"
              href="../static/icons/apple-icon-72x72.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="76x76"
              href="../static/icons/apple-icon-76x76.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="114x114"
              href="../static/icons/apple-icon-114x114.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="120x120"
              href="../static/icons/apple-icon-120x120.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="144x144"
              href="../static/icons/apple-icon-144x144.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="152x152"
              href="../static/icons/apple-icon-152x152.png"
            />
            <link
              rel="apple-touch-icon"
              sizes="180x180"
              href="../static/icons/apple-icon-180x180.png"
            />
            <link
              rel="icon"
              type="image/png"
              sizes="192x192"
              href="/android-icon-192x192.png"
            />
            <link
              rel="icon"
              type="image/png"
              sizes="32x32"
              href="../static/icons/favicon-32x32.png"
            />
            <link
              rel="icon"
              type="image/png"
              sizes="96x96"
              href="../static/icons/favicon-96x96.png"
            />
            <link
              rel="icon"
              type="image/png"
              sizes="16x16"
              href="../static/icons/favicon-16x16.png"
            />
            <link rel="manifest" href="../static/icons/manifest.json" />
            <meta name="msapplication-TileColor" content="#ffffff" />
            <meta
              name="msapplication-TileImage"
              content="../static/icons/ms-icon-144x144.png"
            />
            <meta name="theme-color" content="#ffffff" />
            <script
              defer
              src="https://use.fontawesome.com/releases/v5.0.8/js/all.js"
              integrity="sha384-SlE991lGASHoBfWbelyBPLsUlwY1GwNDJo3jSJO04KZ33K2bwfV9YBauFfnzvynJ"
              crossOrigin="anonymous"
            />
          </Head>
          <div>
            <Header />
            <Sidebar user={this.props.data} />
            <div className={styles.content}>{children}</div>
          </div>
        </React.Fragment>
      );

      return layout(
        <React.Fragment>
          <ComposedComponent {...this.props} />
        </React.Fragment>
      );
    }
  }

  hoistNonReactStatics(Decorator, ComposedComponent);

  return Decorator;
};

export default Dashboard;

/頁面/項目/index.js

import React from 'react';

import Dashboard from '../../layout/Dashboard';

import styles from './styles.less';

class Item extends React.Component {
  constructor() {
    super();
    this.state = {
      loaded: true
    };
  }

  render() {    
    return (
      <div>
        <p>Item</p>
      </div>
    );
  }
}

export default Dashboard(Item);

最后

/pages/index/index.js

import React from 'react';   
import Dashboard from '../../layout/Dashboard';

import styles from './styles.less';

class Index extends React.Component {
  constructor() {
    super();
    this.state = {};
  }

  render() {

    return (
      <div>
        <p>Index</p>
      </div>
    );
  }
}

export default Dashboard(Index);

正如我所說，轉到localhost:3008會在儀表板布局中加載索引就好了。 轉到加載儀表板布局的任何其他內容，即本示例中的項目會引發錯誤

4 個解決方案

解決方案1
 5  2020-12-07 14:57:30

我遇到了同樣的問題，我將 JSON 包中的 react 和 react-dom 版本更改為“next”，然后解決了。

"react": "next", 
"react-dom": "next"

解決方案2
 1  2021-01-10 20:07:25

你應該從 nextjs 導入 useRouter 而不是 react

正確的：

import { useRouter } from 'next/router'

錯誤的：

import {  useRouter } from 'react';

解決方案3
 0  2018-04-25 09:54:36

使用 nextjs，你應該在pages文件夾中每頁只有一個文件。 我看到你有像/pages/item.index.js這樣的文件 .. 嘗試使用這樣的模式：

  • 頁
    • 頁面1.js
    • page2.js
  • 成分
    • 第1頁
      • page-1-component-1.js
      • page-1-component-2.js
    • 第2頁
      • page2-component.js

解決方案4
 0  2021-04-06 05:23:38

我有同樣的問題，但我的錯誤是在頁面內創建一個帶有三個點（...）的文件，如下所示。 請將/pages/api/notes/[...id].js重命名為/pages/api/notes/[id].js

重命名文件名如下

[...id].js => [id].js

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 Next.js (React) 和 ScrollMagic 我想使用 react 和 next.js 從 object 到我的數組 map，這是一個使用鈎子的 function 組件 有沒有辦法使用 Next.js 動態導入來導入函數？ Next.js ssr 的 react-component-export-image 問題 next.js 中的全局數組或反應 js ReferenceError：未定義元素（Object.<anonymous> ) 在 Intro.js-react、React、Next.js 和 Tailwind CSS</anonymous> 運行 react + next.js 項目時遇到問題 使用帶有 next.js 的反應路由器 Window 未在 Next.js React 應用程序中定義 React Starter Kit與Next.js 具有Styleguidist和Fela的Next.js（反應）
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM