和标签不工作的反应给出错误：bundle.js： 9错误：缩小反应错误#130
我正在开发一个使用 web 包的示例 react-redux 应用程序
webpack.config.js
var path=require('path');
const webpack = require('webpack');
module.exports= {
entry : './src/app.js',
output : {
filename : 'bundle.js',
path : path.resolve(__dirname,'public')
},
watch: true,
module : {
rules : [
{
test :/\.js$/,
exclude: /node_modules/,
loader : 'babel-loader',
query : {
"presets": ["@babel/preset-env","@babel/preset-react"]
}
}
]
}
}
bookList.js
"use strict"
import React from 'react';
import {connect} from 'react-redux';
import { bindActionCreators } from 'redux';
import {getBooks} from '../../actions/booksAction';
import {Grid, Col, Row, Button} from 'react-bootstrap';
import bookItem from './bookItem';
class BooksList extends React.Component
{
componentDidMount(){
this.props.getBooks()
}
render()
{
const booksList = this.props.books.map((booksArr)=> {
return (
<Col xs={12} sm={6} md={4} key={booksArr.id}>
testing
</Col>
)
})
return (
<Grid>
{booksList}
</Grid>
)
}
}
function mapStateToProps(state){
// which data to pass to react component
return{
books: state.books.books
}
}
function mapDispatchToProps(dispatch){
return bindActionCreators({getBooks:getBooks}, dispatch)
}
export default connect(mapStateToProps, mapDispatchToProps)(BooksList);
索引.html（网格也将加载的主页面）
<html>
<head>
<title>
Hello Redux
</title>
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.0/css/bootstrap.min.css" rel="stylesheet" crossorigin="anonymous">
</head>
<body>
<div id="root"></div>
</body>
<script src="bundle.js"></script>
</html>
错误bundle.js： 9错误：缩小反应错误#130；访问https://reactjs.org/docs/error-decoder.html?invariant=130
我已经安装了bootstrap，我还需要在webconfig中写什么吗？有人能解决我的问题吗
我尝试在webconfig的预设中添加“样式加载器”和“css加载器”。js，但给出错误
共有1个答案
我建议不要使用< code>bindActionCreator，文档也建议不要与< code>redux一起使用。这具有误导性，因为redux文档中的示例有点过时，并且仍然使用< code>bindActionCreator。更多信息可以在这里找到。
在您的情况下，由于您已经导入了操作，因此不需要使用＜code＞bindActionCreator
function mapStateToProps(state){
// which data to pass to react component
return{
books: state.books.books
}
}
export default connect(mapStateToProps, {getBooks})(BooksList);
至于你得到的错误，这是因为你试图使用的组件之一是未定义的。我注意到你正在使用< code>Grid，尝试使用bootstrap库中的另一个组件。在网格文档中，您可以尝试使用< code >容器 、< code >行和< code >列的组合来创建网格系统。见下文。
<Container fluid="md">
<Row>
<Col>1 of 1</Col>
</Row>
</Container>
如果这仍然会产生问题，请尝试使用div执行此操作，看看它是否有效。未定义的组件可能是依赖版本不匹配的结果。您可以尝试删除您的node_modules并重新安装react-bootstrap。
-
我的文件中有以下ReactJs组件/我的输入。反应js 现在我试着把它导入到。/index.js像这样： 控制台将返回错误： 您刚才遇到的错误全文如下： 这有什么错？
-
我正在渲染一个挑战列表，它在我的本地有效。但是当我将它部署到Netlify时，我在控制台上得到一些错误。我的代码有什么问题？ ** react dom.production.min.js:4408不变违规：缩小的react错误#31；参观https://reactjs.org/docs/error-decoder.html?invariant=31
-
react_devtools_backend。js:2273不变违规：缩小反应错误#152；参观http://reactjs.org/docs/error-decoder.html?invariant=152 当我在本地运行项目时不会出现此问题，但在AWS服务器上部署代码后，可以在控制台中看到此问题。 请帮助，还有一件事如何在本地调试此问题？
-
我们已经为边栏项目的路由实现了一个新的逻辑，之前所有项目都处于同一级别，现在我们正在实现分层显示，页面可以组合到一个模块中，当用户扩展模块时，他将看到相关页面。 为此，我们的JSON结构也发生了变化，现在我们的路由逻辑实现如下- 上面的代码用于为没有子页面的页面提供路由。 以上代码用于包含子页面的模块的路由 下面的代码与问题无关 在进行这些更改后，我的应用程序有时会按预期工作，但有时会收到以下错误
-
**>错误：请求失败，状态代码为404， 在createError(createError.js:16)在settle.js:17)在xmlHttpRequest.HandleLoad(xhr.js:62)**
-
问题内容： 这是我第一次使用axios，遇到错误。 使用正确的url和参数，当我检查网络请求时，确实可以从服务器中获得正确的答案，但是当我打开控制台时，我看到它没有调用回调，而是捕获了错误。 错误：网络错误堆栈跟踪：createError @ http：// localhost：3000 / static / js / bundle.js：2188：15 handleError @ http：//