堆栈内存溢出
  繁体   English   中英

React/Next.js 对象不是函数

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

 原文  2018-04-25 09:47:12  0   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