类型错误:无法读取未定义的属性“存在" [英] TypeError: Cannot read property 'exists' of undefined

问题描述

• 我正在尝试为 jsx 文件编写测试用例
• 在这里我可以传递proptypes...
• 但不是我通过 proptypes 的地方...
• 运行测试用例时出现错误..
• 在下面提供我的错误、测试用例和代码...
• TypeError:无法读取未定义的属性存在"
• 不知道如何使它与这个存在一起工作..
• 它发生在这个函数 dispatchSidebarExists..
• 你能告诉我应该如何将它放入我的测试用例中

javascript错误

javascript error

 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} />);

推荐答案

基本上，你的 reducer 是在调用状态上的 exists 属性，对吧?但它没有找到它?那是因为您已经分派了一个对象，但尚未添加有效负载.

Basically, your reducer is calling the property exists on the state, right? But it's not finding it? That's because you've dispatched an object but haven't added the payload.

你的代码说你像这样分派对象.

Your code says you dispatch the object like this.

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

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

Given your code here....

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

.... 这意味着您要调度的对象将如下所示.

.... That means the object you're dispatching is going to look like this.

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

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

I'm actually not sure how the property get's named in this case, if you have an object and another object inside it without a property name. That being said, this is what your object SHOULD look like.

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

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

If you want to pass information to a reducer, you need to pass it through the payload property. Your object should always have a payload, and that payload should always be an object. Change your code to the following.

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

这个集合的有效载荷对象作为您要传递的信息.然后你的减速器应该在有效载荷对象上查找 exists 属性.

This set's the payload object as the information you want to pass. Then your reducer, should look for the exists property on the payload object.

这篇关于类型错误:无法读取未定义的属性“存在"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！