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

Question

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

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

我试图在 webconfig.js 的预设中添加 'style-loader'、'css-loader' 但给出错误

Answer 1

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

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

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

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

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

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

如果这仍然会产生问题，请尝试使用div执行此操作，看看它是否有效。 未定义的组件可能是依赖版本不匹配的结果。 您可能会尝试删除您的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