<Grid> 和 <Row> 标签在反应中不起作用，给出错误：bundle.js:9 错误：缩小反应错误 #130答案

【问题标题】：<Grid> and <Row> tags not working in react giving error : bundle.js:9 Error: Minified React error #130<Grid> 和 <Row> 标签在反应中不起作用，给出错误：bundle.js:9 错误：缩小反应错误 #130
【发布时间】：2020-10-03 09:41:50
【问题描述】：

我正在使用 webpack 开发一个示例 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);

index.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 错误：缩小的 React 错误 #130；访问https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= 获取完整消息或使用非缩小开发环境获取完整错误和其他有用的警告。 (bundle.js:9)

我已经安装了引导程序，是否需要在 webconfig 中编写任何内容？谁能解决我的问题

我尝试在 webconfig.js 的预设中添加 'style-loader','css-loader' 但出现错误

【问题讨论】：

请提供为 booksList 编写的代码。如果没有书单，则它是未定义的，可能会导致此错误。尝试从渲染函数中删除书单并检查代码是否有效。
用 bookList 更新了代码
要找到真正导致错误的东西，尝试从返回块中删除 booksList 变量并检查错误是否消失。
我删除了 {booksList} 并将其设置为它显示错误
如果我将设置为
它正在工作。 Grid、Row、Col 标记不起作用

标签： javascript reactjs webpack react-redux jsx

【解决方案1】：

我建议不要使用bindActionCreator，docs 也建议不要将它与redux 一起使用。这是误导性的，因为 redux 文档中的示例有点过时并且仍然使用bindActionCreator。更多信息请见here。

在您的情况下，由于您已经在导入操作，因此您不需要使用 bindActionCreator。您可以简单地执行以下操作

function mapStateToProps(state){
    // which data to pass to react component
  return{
    books: state.books.books
  }
}

export default connect(mapStateToProps, {getBooks})(BooksList);

至于您收到的错误是因为您尝试使用的组件之一未定义。我注意到您正在使用Grid，请尝试在引导程序的library 中使用另一个组件。在grid docs中，您可以尝试使用Container、Row和Col的组合来创建网格系统。见下文。

<Container fluid="md">
  <Row>
    <Col>1 of 1</Col>
  </Row>
</Container>

如果这仍然造成问题，请尝试使用div 进行操作，看看它是否有效。未定义的组件可能是依赖版本不匹配的结果。您可以尝试删除您的 node_modules 并重新安装 react-bootstrap.

【讨论】：

是的，我用更改了，那么怎么样。和不起作用的原因是什么
@sivashanker 问题可能是 react-bootstrap 版本不匹配，或者您可能首先忘记了 npm install bootstrap 本身。 react-bootstrap v4+ 也可能不再支持 Grid 和 Well，但我无法确认。
好的，我也安装了引导程序。无论如何它与工作正常谢谢