2016-05-05 39 views
8

Reaksiyon, redux ve tepki-redux kullanarak bir deposu olan bir bileşen yaptım. kodun paketlenmesi webpack ile yapılır. (Lütfen aşağıdaki kodları kontrol edin) Reaksiyon, redux ve tepki-redux ile yapılan ve reaktif uygulamasında webpack ile oluşturulma bileşeni kullanılarak hata oluştu

webpack yapı bileşenini başka bir tepki projesinde kullanmak istediğimde aşağıdaki sorunlarla karşılaştım.

  • Uncaught Invariant Violation: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined.

    • Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

      Sonra ben devam etti ve kodda aşağıdaki değişiklik yapın önceki ı için ve bindActionCreators

      bağlamak aşağıdaki gibi bir yapı bozma atama vardı

      import {connect} from 'react-redux'; 
       
      import {bindActionCreators} from 'redux'; 
       
      import actions from '../app/redux/actions';
      ben bu tahmin olarak

      Sonra ben, süslü parantezler etrafında bağlamak kaldırılması ve bindActionCreators

      import React from 'react'; 
       
      
       
      import connect from 'react-redux'; 
       
      import bindActionCreators from 'redux'; 
       
      import actions from '../app/redux/actions'; 
       
      
       
      import postal from 'postal'; 
       
      
       
      const channel = postal.channel("msplayer"); 
       
      
       
      class Player extends React.Component {
      Ama bundan sonra ben aşağıdaki hatayı karşı karşıyayım tarafından aşağıda gibi değiştirdi ES6'yı ES5'e gönderen babel ile ilgili bir şeydir, ancak bu sorunu çözmek için hangi adımları izleyeceğimizden emin değil misiniz? Bunu çözmek için bir cevap veya bazı işaretçiler almak ister misiniz?

      • Uncaught TypeError: (0 , _reactRedux2.default) is not a function

      • Uncaught TypeError: Cannot read property 'PlayerWrapper' of undefined

      bileşen kodu

      import React from 'react'; 
       
      
       
      import {connect} from 'react-redux'; 
       
      import {bindActionCreators} from 'redux'; 
       
      import actions from '../app/redux/actions'; 
       
      
       
      import postal from 'postal'; 
       
      
       
      const channel = postal.channel("msplayer"); 
       
      
       
      class Player extends React.Component { 
       
      
       
      
       
          constructor() { 
       
           super(); 
       
           this.state = { 
       
            userData: {}, 
       
            uiStates: { 
       
             panelClosed: true, 
       
             submissionSelected: false 
       
            }, 
       
            selectedSubmission: {} 
       
           }; 
       
           this.subSelectChannel = null; 
       
           this.tabSelectChannel = null; 
       
          } 
       
      
       
      
       
          componentWillMount() { 
       
           require('!style!css!../app/styles/player.css'); 
       
          } 
       
      
       
          componentDidMount() { 
       
           var _that = this; 
       
           var _msData = { 
       
            piToken: this.props.piToken, 
       
            sectionId: this.props.sectionId, 
       
            assignmentId: this.props.assignmentId, 
       
            userId: this.props.userId 
       
           }; 
       
      
       
           this.props.actions.getAssignmentData(msData); 
       
           this.props.actions.getPeerSubmissionData(msData); 
       
      
       
           this.subSelectChannel = channel.subscribe("submission.selected", function (data, envelope) { 
       
            _that.setState({ 
       
              uiStates: Object.assign({}, _that.state.uiStates, { 
       
               "submissionSelected": true 
       
              }) 
       
             } 
       
            ); 
       
            _that.setState({ 
       
              selectedSubmission: data.submission 
       
             } 
       
            ); 
       
           }); 
       
      
       
           this.tabSelectChannel = channel.subscribe("tab.selected", function (data, envelope) { 
       
            if (data.submitted) { 
       
             _that.showSubmissionDetailPanel(data.data); 
       
            } else { 
       
             _that.hideSubmissionDetailPanel() 
       
            } 
       
           }); 
       
          } 
       
      
       
          closePanel() { 
       
      
       
           postal.publish({ 
       
            channel: "notifier", 
       
            topic: "notifier.notify", 
       
            data: { 
       
             type: "warning", 
       
             message: "warning message" 
       
            } 
       
           }); 
       
      
       
      
       
           if (this.state.uiStates.panelClosed) { 
       
      
       
            this.setState({ 
       
              uiStates: Object.assign({}, this.state.uiStates, { 
       
               "panelClosed": false 
       
              }) 
       
             } 
       
            ); 
       
           } else { 
       
      
       
      
       
            postal.publish({ 
       
             channel: "msplayer", 
       
             topic: "close.selected", 
       
             data: {} 
       
            }); 
       
      
       
            this.setState({ 
       
              uiStates: Object.assign({}, this.state.uiStates, { 
       
               "panelClosed": true, 
       
               "submissionSelected": false 
       
              }) 
       
             } 
       
            ); 
       
           } 
       
          } 
       
      
       
      
       
          hideSubmissionDetailPanel() { 
       
           console.log("inside hide submission panel"); 
       
           this.setState({ 
       
             uiStates: Object.assign({}, this.state.uiStates, { 
       
              "submissionSelected": false 
       
             }) 
       
            } 
       
           ); 
       
          }; 
       
      
       
          showSubmissionDetailPanel(data) { 
       
           console.log("inside show submission panel"); 
       
           this.setState({ 
       
             uiStates: Object.assign({}, this.state.uiStates, { 
       
              "submissionSelected": true 
       
             }) 
       
            } 
       
           ); 
       
      
       
           this.setState({ 
       
            selectedSubmission: data 
       
           }); 
       
          }; 
       
      
       
      
       
          loadUserAssignmentData(submission) { 
       
      
       
           this.setState({ 
       
             uiStates: Object.assign({}, this.state.uiStates, { 
       
              "submissionSelected": true 
       
             }) 
       
            } 
       
           ); 
       
      
       
           postal.publish({ 
       
            channel: "msplayer", 
       
            topic: "submission.selected", 
       
            data: { 
       
             submission: submission 
       
            } 
       
           }); 
       
      
       
          } 
       
      
       
          componentWillUnmount() { 
       
           postal.unsubscribe(this.subSelectChannel); 
       
           postal.unsubscribe(this.tabSelectChannel); 
       
          } 
       
      
       
          render() { 
       
      
       
           var _that = this; 
       
           var _submittedKey = 0; 
       
           var _unsubmittedKey = 0; 
       
           return (
       
            <div className="player-container col-sm-12"> 
       
             <div className="row"> 
       
             </div> 
       
             <div className="row"> 
       
              <div className={_that.state.uiStates.panelClosed?"col-sm-12":"col-sm-8"}> 
       
               <div className="top-actions-panel"> 
       
                <div className="pull-right"> 
       
      
       
                </div> 
       
      
       
      
       
               </div> 
       
               <div className="common-view"> 
       
                <div className="breadcrumb-panel"> 
       
                 <ol className="breadcrumb arrow-left"> 
       
                  <li><a href="#">Communication 220</a></li> 
       
                  <li className="active">TED Topics for an Informative Speech</li> 
       
                 </ol> 
       
                </div> 
       
                <div className="description-panel"> 
       
                 <p className="title"> 
       
                  <b>Title</b>: 
       
                  <span>{_that.props.assignment.title}</span> 
       
                 </p> 
       
                 <p className="dueDates font-light"> 
       
                  <b>Due </b>:<span>{_that.props.assignment.startDate}</span> 
       
                  <b> - </b><span>{_that.props.assignment.endDate}</span> 
       
                 </p> 
       
                 <p> 
       
                  <b>Learning Objective: </b> 
       
                  <span>{_that.props.assignment.learningObjective}</span> 
       
                 </p> 
       
                 <p> 
       
                  <b>Description: </b> 
       
                  <span> 
       
                   {_that.props.assignment.description} 
       
                  </span> 
       
                 </p> 
       
                </div> 
       
      
       
                <div 
       
                 className={_that.state.uiStates.submissionSelected?"row submission-info col-sm-12":"hidden"}> 
       
                 <div> 
       
                  <span className="student-avatar"> 
       
                   <img 
       
                    src={(_that.state.selectedSubmission && _that.state.selectedSubmission.userDetails && _that.state.selectedSubmission.userDetails.avatar && _that.state.selectedSubmission.userDetails.avatar!=="")?_that.state.selectedSubmission.userDetails.avatar:"../app/images/avatar.svg"}/> 
       
                  </span> 
       
      
       
                  <p> 
       
                   <b> <span 
       
                    className="font-light mediaTile"><strong>{(_that.state.selectedSubmission.title && _that.state.selectedSubmission.title !== null && _that.state.selectedSubmission.title !== "") ? _that.state.selectedSubmission.title : "."}</strong></span> 
       
                   </b> 
       
                  </p> 
       
                  <br/> 
       
                  <p> 
       
                   <span 
       
                    className="font-light ">{(_that.state.selectedSubmission.description && _that.state.selectedSubmission.description !== null && _that.state.selectedSubmission.description !== "") ? _that.state.selectedSubmission.description : "."}</span> 
       
                  </p> 
       
                 </div> 
       
                </div> 
       
      
       
                <div className="common-functionality-panel col-sm-12"> 
       
                </div> 
       
               </div> 
       
              </div> 
       
              <div 
       
               className={_that.state.uiStates.panelClosed?"hidden":"col-sm-4 no-padding peer-review-panel"}> 
       
      
       
               <div className="review-section"> 
       
                <button className="btn btn-link pull-left close-panel" 
       
                  onClick={_that.closePanel.bind(_that)}> 
       
                 <span className="reader-only">Close Student Submission Panel</span> 
       
                 <i className="fa fa-times"></i> 
       
                </button> 
       
      
       
                <div className="submission-tabs"> 
       
                </div> 
       
               </div> 
       
              </div> 
       
             </div> 
       
            </div> 
       
           ) 
       
          } 
       
      
       
      } 
       
      
       
      function mapStateToProps(state) { 
       
          return state 
       
      } 
       
      
       
      function mapDispatchToProps(dispatch) { 
       
          return { 
       
           actions: bindActionCreators(actions, dispatch) 
       
          } 
       
      } 
       
      
       
      export default connect(mapStateToProps, mapDispatchToProps)(Player)

      bileşen sarıcı kodu

      import React from 'react'; 
       
      import Player from './app'; 
       
      
       
      import bb from './redux/store' 
       
      import Provider from 'react-redux'; 
       
      
       
      class PlayerWrapper extends React.Component { 
       
      
       
      
       
          constructor(props) { 
       
           super(props); 
       
          } 
       
      
       
          render() { 
       
           return (
       
            <Provider store={bb.store}><Player piToken={this.props.piToken} sectionId={this.props.sectionId} 
       
                     assignmentId={this.props.assignmentId} 
       
                     userId={this.props.userId}/></Provider> 
       
           ) 
       
          } 
       
      } 
       
      
       
      export default PlayerWrapper;

      webpack inşa dosyası

      var webpack = require('webpack'); 
       
      
       
      module.exports = { 
       
          devtool: 'inline-source-map', 
       
          entry: [ 
       
           'webpack-hot-middleware/client', 
       
           './app/PlayerWrapper.js' 
       
          ], 
       
          output: { 
       
           path: require("path").resolve("./dist/app"), 
       
           filename: 'index.js', 
       
           publicPath: '/' 
       
          }, 
       
          plugins: [ 
       
           new webpack.optimize.OccurrenceOrderPlugin(), 
       
           new webpack.HotModuleReplacementPlugin(), 
       
           new webpack.NoErrorsPlugin() 
       
          ], 
       
          module: { 
       
           loaders: [{ 
       
            test: /\.js?$/, 
       
            exclude: /node_modules/, 
       
            loader: 'babel-loader', 
       
            query: { 
       
             presets: ['react', 'es2015'] 
       
            } 
       
           }, 
       
           { test: /\.css$/, loader: ["css-loader","style-loader"] }, 
       
           { test: /\.scss$/, loader: "sass-loader" }, 
       
           { test: /\.(ttf|eot|svg|eot|woff|otf|png|gif)(\?v)*/, loader: "file-loader?name=fonts/[name].[ext]" } 
       
           ] 
       
          } 
       
      };

    +1

    Peki burada sorun nedir? 'Connect' ve 'bindActionCreators' adlı ithalata sahip olduklarından beri kaşlı ayraç kullanmalısınız. –

    +0

    Bu sorunu çözeceğimi düşündüğüm şeyi yayınladım, ancak daha sonra bahsettiklerini buldum. şimdi kıvırcık kaşlı ayraçları kullanıyorum, sonra ilk hatayı alıyorum. Sorunu nasıl çözeceğimi merak ediyorum, neden ilk hata iletisinde sorunları alıyorum? –

    +0

    lütfen son kodu gönderin. –

    cevap

    0

    hata gösterir reactDOM.render çağrınızda (WHI içinde ch asla göstermezsiniz), bir bileşen örneği yerine sadece bir işlev veya sınıf adı geçtiniz.

    Örneğin, Aşağıdaki örnek yanlıştır:

    ReactDOM.render (MyComponent, belge.getElementById ('MyComponent'));

    ve düzeltme köşeli parantez içinde sararak bir bileşen örneğine ilk parametre açmak için:

    ReactDOM.render (< MyComponent/>, Document.getElementById ('MyComponent'));

    13

    Burada açıklanan ikinci hatayı gidermek için biraz zaman harcadık ve süreçte ES6 içe aktarma sözdizimi hakkında biraz bilgi öğrendim.

    hattı:

    import connect from 'react-redux';

    tepki-redux kütüphaneden varsayılan ihracat ithal edecek. ne istiyorsun özel durumda hangi

    import { connect } from 'react-redux';

    bağlamak adlı tepki-redux kütüphaneden içinden nesneyi ithal edecek: o Değişen

    Uncaught TypeError: (0 , _reactRedux2.default) is not a function

    için: Bu hatanın kaynağı . Not küme parantezleri

    Kontrol dışarı Ben de birinciye benzer bir hata oldu here

    MDN docs:

    Warning: React.createElement: type should not be null, undefined, boolean, or number. It should be a string (for DOM elements) or a ReactClass (for composite components).

    Ben yukarıda doğru benim tanımlanan bileşenleri ithal etmediğim halde .

    +0

    Bir çekicilik gibi. Teşekkürler. –

    +0

    'import {Class} ...' import Class ... 'a değil - bravo! Hiçbir fikrim yoktu ve birileri bana söylemeden anlamayacaktım! – pstanton

    0

    hata onlar kendi paketlerin varsayılan ihracat olmadığı için bir yere daha önce bağlanmak destructure gerekir belirtildiği gibi gerçek bir bileşeni olmayan bir şey (veya dize)

    işlemek için teşebbüs ve bindActionCreators anlamına gelir .

    Hatasına gelince, sahne oluşturma girişiminde bulunduğunuz zaman, render edilecek hiçbir şey yoktur (örneğin, boş veya tanımsız), ancak ReactDOM.render adını verdiğiniz yerde kod yayınlamadığınızdan beri emin olamam.

    İlgili konular