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

Question

I am developing a sample react-redux application using webpack我正在使用 webpack 开发示例 react-redux 应用程序

webpack.config.js 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 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 (main page where grid also will load) 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>

error bundle.js:9 Error: Minified React error #130;错误bundle.js:9 错误：缩小反应错误 #130； visit https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]= for the full message or use the non-minified dev environment for full errors and additional helpful warnings.访问https://reactjs.org/docs/error-decoder.html?invariant=130&args[]=undefined&args[]=获取完整消息，或使用非精简开发环境获取完整错误和其他有用的警告。 (bundle.js:9) (bundle.js:9)

I already installed bootstrap, should i need to write anything in webconfig?我已经安装了引导程序，是否需要在 webconfig 中编写任何内容？ Can anyone resolve my issue谁能解决我的问题

I have tried to add 'style-loader','css-loader' in presets of webconfig.js but giving error我试图在 webconfig.js 的预设中添加 'style-loader'、'css-loader' 但给出错误

Answer 1

I'd recommend not using bindActionCreator , the docs also recommend not using it with redux .我建议不要使用bindActionCreator ，文档也建议不要将它与redux一起使用。 It's misleading because the examples in the redux docs are a bit outdated and still use bindActionCreator .这是误导性的，因为 redux 文档中的示例有点过时并且仍然使用bindActionCreator 。 More on that can be found here .更多信息可以在这里找到。

In your case, since you're already importing your action, you don't need to use the bindActionCreator .在您的情况下，由于您已经在导入您的操作，因此您不需要使用bindActionCreator 。 You can simply do the below您可以简单地执行以下操作

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

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

As for the error you're getting it's because one of the Components you tried to use is undefined.至于您收到的错误是因为您尝试使用的组件之一是未定义的。 I noticed you're using Grid , try using another component in bootstrap's library .我注意到您正在使用Grid ，请尝试使用 bootstrap's library中的另一个组件。 In the grid docs , you can try using a combination of Container , Row , and Col to create a grid system.在网格文档中，您可以尝试使用Container 、 Row和Col的组合来创建网格系统。 See below.见下文。

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

If this is still creating issues try doing it with a div and see if it works.如果这仍然会产生问题，请尝试使用div执行此操作，看看它是否有效。 The undefined components could be a result of a dependency version mismatch.未定义的组件可能是依赖版本不匹配的结果。 You could potentially try deleting your node_modules and re-installing react-bootstrap.您可能会尝试删除您的node_modules并重新安装react-bootstrap.

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

问题描述

1 个解决方案

解决方案1
0 已采纳 2020-06-13 18:18:50

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

问题描述

1 个解决方案

解决方案1 0 已采纳 2020-06-13 18:18:50

解决方案1
0 已采纳 2020-06-13 18:18:50