Question

我寻找了一段时间的解决方案，但找不到适合我的情况的解决方案。请忍受我还在学习。我正在尝试向使用Next.js和reactstrap的React应用程序添加导航栏。我已经包括了组件，控制台日志和package.json

Navbar React组件

import React from "react";
import {
  Collapse,
  Navbar,
  NavbarToggler,
  NavbarBrand,
  Nav,
  NavItem,
  NavLink,
  UncontrolledDropdown,
  DropdownToggle,
  DropdownMenu,
  DropdownItem
} from "reactstrap";

export default class Navbarr extends React.Component {
  constructor(props) {
    super(props);

    this.toggle = this.toggle.bind(this);
    this.state = {
      isOpen: false
    };
  }
  toggle() {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }
  render() {
    return (
      <div>
        <Navbar color="light" light expand="md">
          <NavbarBrand href="/">reactstrap</NavbarBrand>
          <NavbarToggler onClick={this.toggle} />
          <Collapse isOpen={this.state.isOpen} navbar>
            <Nav className="ml-auto" navbar>
              <NavItem>
                <NavLink href="/components/">Components</NavLink>
              </NavItem>
              <NavItem>
                <NavLink href="/">
                  GitHub
                </NavLink>
              </NavItem>
              <UncontrolledDropdown nav inNavbar>
                <DropdownToggle nav caret>
                  Options
                </DropdownToggle>
                <DropdownMenu right>
                  <DropdownItem>Option 1</DropdownItem>
                  <DropdownItem>Option 2</DropdownItem>
                  <DropdownItem divider />
                  <DropdownItem>Reset</DropdownItem>
                </DropdownMenu>
              </UncontrolledDropdown>
            </Nav>
          </Collapse>
        </Navbar>
      </div>
    );
  }
}

Console.log

Cannot convert undefined or null to object
TypeError: Cannot convert undefined or null to object
    at Function.getOwnPropertyDescriptors (<anonymous>)
    at _objectSpread (/Users/neilskaria/Projects/projectb/node_modules/reactstrap/node_modules/@babel/runtime/helpers/objectSpread.js:19:46)
    at /Users/neilskaria/Projects/projectb/node_modules/reactstrap/lib/Collapse.js:146:43
    at Transition.render (/Users/neilskaria/Projects/projectb/node_modules/react-transition-group/Transition.js:418:14)
    at processChild (/Users/neilskaria/Projects/projectb/node_modules/react-dom/cjs/react-dom-server.node.development.js:2863:18)
    at resolve (/Users/neilskaria/Projects/projectb/node_modules/react-dom/cjs/react-dom-server.node.development.js:2716:5)
    at ReactDOMServerRenderer.render (/Users/neilskaria/Projects/projectb/node_modules/react-dom/cjs/react-dom-server.node.development.js:3100:22)
    at ReactDOMServerRenderer.read (/Users/neilskaria/Projects/projectb/node_modules/react-dom/cjs/react-dom-server.node.development.js:3059:29)
    at renderToString (/Users/neilskaria/Projects/projectb/node_modules/react-dom/cjs/react-dom-server.node.development.js:3526:27)
    at renderPage (/Users/neilskaria/Projects/projectb/node_modules/next/dist/server/render.js:319:26)
    at Function.getInitialProps (/Users/neilskaria/Projects/projectb/node_modules/next/dist/server/document.js:65:25)
    at _callee$ (/Users/neilskaria/Projects/projectb/node_modules/next/dist/lib/utils.js:86:30)
    at tryCatch (/Users/neilskaria/Projects/projectb/node_modules/regenerator-runtime/runtime.js:62:40)
    at Generator.invoke [as _invoke] (/Users/neilskaria/Projects/projectb/node_modules/regenerator-runtime/runtime.js:288:22)
    at Generator.prototype.(anonymous function) [as next] (/Users/neilskaria/Projects/projectb/node_modules/regenerator-runtime/runtime.js:114:21)
    at asyncGeneratorStep (/Users/neilskaria/Projects/projectb/node_modules/@babel/runtime-corejs2/helpers/asyncToGenerator.js:5:24)

package.json

{
  "name": "projectb",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "next",
    "build": "next build",
    "start": "next start -p $PORT",
    "heroku-postbuild": "npm run build",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "@zeit/next-css": "^1.0.1",
    "bootstrap": "^4.2.1",
    "next": "^7.0.2",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "reactstrap": "^7.1.0"
  }
}

Answer 1

显然，Reactstrap中有一个错误：

https://github.com/reactstrap/reactstrap/issues/1373

解决方法是在删除json-lock文件后重新安装软件包。

您可以看到：

在package-lock.json中用〜修饰^

来自此修复程序：

https://github.com/reactstrap/reactstrap/issues/1373#issuecomment-456229877

在“ reactstrap”导航栏中使用“折叠”时，“无法将未定义或null转换为对象”

1 个答案: