类型错误：无法读取未定义的属性“存在”

• 我正在尝试为 jsx 文件编写一个测试用例
• 在此我能够传递 proptypes...
• 但不是我正确传递 proptypes 的地方......
• 当我运行测试用例时出现错误..
• 下面提供我的错误、测试用例和代码...
• 类型错误：无法读取未定义的属性“存在”
• 不知道如何让它与这个存在一起工作..
• 它发生在这个函数调度侧边栏存在..
• 你能告诉我我应该如何将它放入我的测试用例中吗

javascripterror

 1) shallow renderer tests for sports-template-standard  should render correctly:
     TypeError: Cannot read property 'exists' of undefined
      at [object Object].dispatchSidebarExists (/src/sports-template-standard.jsx:80:56)
      at [object Object].componentWillMount (/src/sports-template-standard.jsx:49:14)
      at [object Object].ReactCompositeComponentMixin.mountComponent (\node_modules\react\lib\ReactCompositeComponent.js:210:12)
      at [object Object].wrapper [as mountComponent] (\node_modules\react\lib\ReactPerf.js:66:21)
      at [object Object].ReactShallowRenderer._render (\node_modules\react\lib\ReactTestUtils.js:362:14)
      at [object Object].ReactShallowRenderer.render (\node_modules\react\lib\ReactTestUtils.js:344:8)
      at Context.<anonymous> (/test/sports-template-standard-tests.js:31:25)
      at callFn (\node_modules\mocha\lib\runnable.js:286:21)
      at Test.Runnable.run (\node_modules\mocha\lib\runnable.js:279:7)
      at Runner.runTest (\node_modules\mocha\lib\runner.js:421:10)
      at \node_modules\mocha\lib\runner.js:528:12
      at next (\node_modules\mocha\lib\runner.js:341:14)
      at \node_modules\mocha\lib\runner.js:351:7
      at next (\node_modules\mocha\lib\runner.js:283:14)
      at Immediate._onImmediate (\node_modules\mocha\lib\runner.js:319:5)

测试用例

`javascript`
import {expect} from 'chai';
import React from 'react';
import TestUtils from 'react-addons-test-utils';
import initializeJsDom from './test-utils/dom.js';
import {SportsPageClasses} from 'sports-css-grids';
import sportsMockUpStandard from '../src/sports-template-standard';

describe('shallow renderer tests for sports-template-standard ', function() {
    let shallowRenderer = TestUtils.createRenderer();
    console.log("shallowRenderer" + JSON.stringify(shallowRenderer));

    it('should render correctly', () => {

        //var rightPanel ="some string";
        var layout ="some string";        
        var hasSidebar = function(){
            done();
        }
        console.log("here1");
        //this.props.layout.rightPanel.exists = 'some value';

        shallowRenderer.render(<sportsMockUpStandard
            headerClass='8887' 
            layout= {{id: 100, text: 'hello world'}} 
            sidebar= {[{hasSidebar},{id: 100, text: 'hello world'}]} 
            title={"Demo"} />);

        // shallowRenderer.render(<sportsMockUpStandard

        //layout= {{id: 100, text: 'hello world'}}  />); 

        console.log("here2");
    });
});

片段代码

`javascript`    
dispatchSidebarExists(props) {
    let hasSidebar = !!props.sidebar;

    // infinite loop without this check
    if (hasSidebar !== this.props.layout.rightPanel.exists) {
        this.props.dispatch(setSportsCornerState({
            exists: hasSidebar
        }));
    }
}

整个代码

export function setSportsCornerState(stateString) { return { type: 'SET_HEADERPANEL', stateString }; } ```

新警告

 Warning: Failed propType: Invalid prop `sidebar` supplied to `sportsMockUpStandard`.


 // var rightPanel ="some string";
        var layout ="some string";

         var hasSidebar = function(){
          //  done();
    }
        console.log("here1");
      //  this.props.layout.rightPanel.exists = 'some value';

        shallowRenderer.render(<sportsMockUpStandard
            headerClass='8887' 
            layout= {{rightPanel: {exists: hasSidebar}, text: 'hello world'}} 
            sidebar= {[{hasSidebar},{id: 100, text: 'hello world'}]} 
            title={"Demo"} dispatch={hasSidebar} />);

基本上，你的减速器正在调用该属性exists就国家而言，对吗？但就是没找到？这是因为您已经分派了一个对象，但尚未添加有效负载。

您的代码表示您像这样调度对象。

setSportsCornerState(stateString) { 
    return { type: 'SET_HEADERPANEL', stateString }; 
}

在这里给出你的代码......

this.props.dispatch(setSportsCornerState({
            exists: hasSidebar
        }));

.... 这意味着您要分派的对象将如下所示。

 { type: 'SET_HEADERPANEL', {exists: hasSidebar} }

实际上，如果您有一个对象和其中的另一个对象没有属性名称，我实际上不确定在这种情况下如何命名该属性。话虽这么说，这就是你的对象应该是什么样子的。

     { type: 'SET_HEADERPANEL', payload: {exists: hasSidebar} }

如果你想将信息传递给reducer，你需要通过payload属性传递它。您的对象应该始终有一个有效负载，并且该有效负载应该始终是一个对象。将您的代码更改为以下内容。

export function setSportsCornerState(stateString) { 
    return { type: 'SET_HEADERPANEL', payload: stateString }; 
} 

该集合是有效负载对象，作为您要传递的信息。那么你的减速机应该寻找exists有效负载对象上的属性。