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

Posted 2023-03-23

技术标签:

【中文标题】在“reactstrap”导航栏中使用“折叠”时“无法将未定义或空值转换为对象”【英文标题】："Cannot convert undefined or null to object" when using "Collapse" in "reactstrap" navbar 【发布时间】：2019-06-15 11:23:14 【问题描述】：

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

导航栏反应组件

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>
    );

控制台日志

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"

【问题讨论】：

只是为了好玩，把你的状态变量 'isOpen` 属性改成别的东西，也改变它的使用参考。没有这样的运气:(如果你不介意看一下github.com/Skarian/projectb，这是我的回购另外，当我删除和时，整个东西都会呈现而没有错误。 【参考方案1】：

显然 Reactstrap 有一个 bug：

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

修复方法是在删除 json-lock 文件后重新安装包。

你可以看到：