Dva: عندما يقوم التحميل الديناميكي للإصدار 1.2.1 بتحميل الصفحة للمرة الثانية ، سيتم الإبلاغ عن خطأ عندما يتحقق app.model من التسمية

فك النموذج أولا قبل النموذج.

مع إضافة unmodel ، لن يُبلغ التبديل بين المسارات المختلفة ذهابًا وإيابًا عن خطأ ، ولكن إذا تم تحميل نفس المسار باستمرار ، فسيتم الإبلاغ عن خطأ ، ولا يمكن الحصول على القيمة في الحالة في mapStateToProps.

function mapStateToProps(state) {
    const { name } = state.app;
    return { name };
}

Uncaught TypeError: Cannot read property 'name' of undefined
    at Connect.mapStateToProps [as finalMapStateToProps]

 const routes = [
    {
      path: '/',
      name: 'app',
      getComponent(nextState, cb) {
        require.ensure([], require => {
          app.unmodel('app');
          app.model(require('./models/app'));
          cb(null, require('./routes/App'));
        });
      },
    }
];

تم التخلص من البيانات بعد إلغاء النموذج ، لذلك يجب مراعاة الحالة غير المحددة في mapStateToProps.

في الواقع ، لا أريد إلغاء النموذج هنا ، لأنه يتم تحميل الصفحة عدة مرات أثناء التحميل الديناميكي ، وفشل التحقق من اسم نموذج التسجيل. هل هناك أي حل جيد في هذا السيناريو؟

App.model: يتم الإبلاغ عن مساحة الاسم يجب أن تكون فريدة عندما يتم تحميل النموذج ديناميكيًا. ستكون هذه المشكلة على ما يرام إذا عدت إلى الإصدار 1.1.0.

يجب أن يقوم MelonYii بتحميل النموذج ديناميكيًا ويجب ألا تكون هناك مشكلة من هذا القبيل. فقط إذا كانت مساحة اسم النموذج المسجل بواسطة app.model موجودة من قبل ، فسيتم الإبلاغ عن خطأ. حالات الاستخدام ذات الصلة: https://github.com/dvajs/dva/blob/e6030af/test/app.model-test.js#L39 -L108

mriclesorryccMelonYii الآن بسيطة للتعامل معها، وأعتقد أنه يمكن أن يكون مثل هذا: الأحمال الصفحة الرئيسية للنموذج في وقت واحد، ويحمل فقط حيوي في الطرق
صفحة الطريق:
مثل:
app.unmodel ('app') ؛
app.model (تتطلب ('./ Models / app')) ؛ هذين السطرين غير مطلوبين.

على أي حال ، بعد أن يكون نموذج التحميل لمرة واحدة عبارة عن مجموعة من الكائنات ، يجب ألا يؤثر على الأداء كثيرًا.

szwork2013 كيف يتم تحميل الصفحات ديناميكيًا؟

import React, {PropTypes} from "react";
import {Router, Route,IndexRoute,Redirect} from "dva/router";


 //第一种动态加载方法

const IndexPage = (location, callback) => {
  require.ensure([], require => {callback(null,
    require('./indexPage/indexPage.jsx'))}, 'IndexPage')
}; 
const App = (location, callback) => {
  require.ensure([], require => {callback(null,
    require('./App'))}, 'App')
};
const AddPage = (location, callback) => {
  require.ensure([], require => {callback(null,
    require('./addImages/addImages'))}, 'AddPage')
};
const EditPage = (location, callback) => {
  require.ensure([], require => {callback(null,
    require('./edit/edit'))}, 'EditPage')
};

export default function ({history}) {
    return (
        <Router history={history}> 
            <Route path="/" getComponent={App} >
                <IndexRoute getComponent={IndexPage} /> 
                <Route path="/add" getComponent={AddPage}/>
                <Route path="/edit" getComponent={EditPage}/> 
                <Route path="/*" getComponent={IndexPage}/>
            </Route>
        </Router>
    );
};

// 第二种动态加载方法
 export default function ({history}) {
  const routes = [
    {
      path: '/',
      component:require('./app'),
      getIndexRoute (nextState, cb) {
        require.ensure([], require => { 
          cb(null, {component: require('./indexPage/indexPage.jsx')})
        })
      },
      childRoutes: [
        {
          path: 'add',
          name: 'add',
          getComponent (nextState, cb) {
            require.ensure([], require => { 
              cb(null, require('./addImages/addImages'))
            })
          }
        }, {
          path: 'edit',
          name: 'edit',
          getComponent (nextState, cb) {
            require.ensure([], require => { 
              cb(null, require('./edit/edit'))
            })
          }
        } 
      ]
    }
  ]

  return <Router history={history} routes={routes} />
} 

 //在首页index.js文件:
import './index.html';
import './index.less';
import dva from 'dva';
//import { useRouterHistory,browserHistory } from 'dva/router' 

import { useRouterHistory } from 'dva/router';
import { createHistory } from 'history'; 

// 1. Initialize
const app = dva({
  history: useRouterHistory(createHistory)({basename:'/'}),
});

// 2. Plugins
//app.use({});

// 3. Model 一次性加载完model
app.model(require('./models/my')); 
app.model(require('./models/image'));
app.model(require('./models/add'));
app.model(require('./models/edit')); 

// 4. Router 按需加载router
app.router(require('./routes/router.js'));

// 5. Start
app.start('#root');

وثائق Markdown للرجوع إليها:

• https://segmentfault.com/markdown
• https://guides.github.com/features/mastering-markdown/

@ nianhua110 هل حصلت عليه حتى الآن؟ إذا كانت لديك خبرة في node.js ، التطوير الزاوي ، فستعتقد أن استضافة sorrycc على عملك الشاق! شكرا 🙏🙏

sorrycc آسف ، كان العمل شاقًا للغاية الآن.

@ szwork2013 ، شكرا لك حار ، سأحاول أولا.

حلول لمثل هذه المشاكل:
(أنا أجيب واحدًا تلو الآخر ، فالكثير من الناس قد واجهوا هذه المشكلة؟)

if(!app._models.some(val=>(val.namespace ===  'home')) {
        app.model(require('./models/home'))
}

# اقتراح المطورين: هل يمكن لرسالة الخطأ أن تشير بوضوح إلى XXX ، التحميل المتكرر ، ملف الخطأ ورقم السطر؟

لا حاجة لفك النموذج

try {
  app.model(require(`./models/${model}`));
}
catch(e) {}

على غرارxttianma

لخص مشكلة التحميل الديناميكي ، وتابع مع # 533 إذا كان هناك أي مشكلة.