reactjs - 使用 react-bootstrap 时收到无效的钩子调用警告
问题描述
我在使用 react-bootstrap 时遇到问题,特别是当我尝试使用 react-bootstrap 标签时,例如<Row></Row>
,我的应用程序出现“无效的挂钩调用”错误。
我已经运行 npm ls ,这些是我当前安装的包/版本:
boostrap@4.6.0 react-bootstrap@1.6.1 react-dom@17.0.2 react@17.0.2
我还遵循了 React 文档中关于此错误的建议,并添加了日志以查看我是否有 React 的重复副本,但测试在控制台中返回“true”。
这是我项目中的 package.json 文件:
{
"name": "kanvaswebappr",
"version": "0.1.0",
"private": true,
"dependencies": {
"bootstrap": "^4.1.3",
"jquery": "^3.5.1",
"merge": "^1.2.1",
"oidc-client": "^1.9.0",
"react-router-bootstrap": "^0.25.0",
"react-router-dom": "^5.1.2",
"react-scripts": "^3.4.4",
"reactstrap": "^8.4.1",
"rimraf": "^2.6.2"
},
"devDependencies": {
"ajv": "^6.9.1",
"cross-env": "^5.2.0",
"typescript": "^3.7.5",
"eslint": "^6.8.0",
"eslint-config-react-app": "^5.2.0",
"eslint-plugin-flowtype": "^4.6.0",
"eslint-plugin-import": "^2.20.1",
"eslint-plugin-jsx-a11y": "^6.2.3",
"eslint-plugin-react": "^7.18.3",
"nan": "^2.14.1"
},
"peerDependencies": {
"react": "^16.0.0",
"react-dom": "^16.0.0"
},
"eslintConfig": {
"extends": "react-app"
},
"scripts": {
"start": "rimraf ./build && react-scripts start",
"build": "react-scripts build",
"test": "cross-env CI=true react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"lint": "eslint ./src/"
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
}
}
如您所见,我已将 react 和 reactdom 移至 peeDependencies 中,然后运行 npm install,但这也无济于事。
我的应用程序目前是超级基础的,因为我刚刚开始/学习。
我的 index.js 文件:
import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom';
import App from './containers/App';
import registerServiceWorker from './registerServiceWorker';
import 'bootstrap/dist/css/bootstrap.css';
const baseUrl = document.getElementsByTagName('base')[0].getAttribute('href');
const rootElement = document.getElementById('root');
ReactDOM.render(
<BrowserRouter basename={baseUrl}>
<App />
</BrowserRouter>,
rootElement);
我的 App.js 文件:
import React, { Component } from 'react';
import './App.css';
import Layout from '../components/Layout/Layout';
class App extends Component {
render() {
return (
<Layout>
<strong>This content is going to be rendered as the props.children inside the Layout component.</strong>
</Layout>
);
}
}
export default App;
我的 Layout.js 文件:
import React from 'react';
import Alert from 'react-bootstrap/Alert';
const layout = (props) => {
return (
<div>
<div>
This is the place for the navigation component.
</div>
<Alert>
This is an alert—check it out!
</Alert>
<main>
{props.children}
</main>
</div>
)
}
export default layout;
如果有人能够提供帮助,我将不胜感激!
解决方案
今天早上又搞砸了一些,我自己修好了。在此处发布此内容以防对其他人有用。
我正在构建我的 React 应用程序作为 asp.net 解决方案的一部分,并且在解决方案级别和我的实际 React 应用程序/项目中都有一个 node_modules 文件夹。我对这一切都很陌生,所以我想我已经设法在这两个地方安装了软件包,而且它们在安装的内容和版本号方面不同步。我npm update
在两个级别上运行以使所有内容都保持最新状态,然后我npm link MyApp/node-modules/react
从解决方案文件夹中运行以确保 React 没有被复制(尽管我不认为是这样)。
现在一切似乎都在工作。
推荐阅读
- swift - 快速解决冲突的结构值类型
- php - Laravel 5.5 基于 MySQL 的“队列”在高请求量时锁定数据库
- python - 如何使素数的递归函数更有效
- html - 当所有内容都适合页面时,我的网站似乎可以滚动
- java - 无法连接到 localhost/0:0:0:0:0:0:0:1:15239
- html - 简单的滑块 - CSS 背景图像与类似 srcset 的响应行为和可访问性?
- python - 从 SelectPercentile 中提取特征细节:列名和相应的分数
- azure - Azure 流量管理器,用于切换到不同的 API 管理服务
- c# - 在 blazor 中改变组件属性的正确方法
- google-cloud-platform - 同意设置为内部的 Google 项目/谁是“我的组织的成员”,我如何管理成员?