TypeError：无法读取未定义的属性“存在”

Posted 2023-03-05

【中文标题】TypeError：无法读取未定义的属性“存在”

【英文标题】：TypeError: Cannot read property 'exists' of undefined

【发布时间】：2016-07-03 02:13:12

【问题描述】：

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

javascript 错误

 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");
    );
);

sn-p 代码

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

【问题讨论】：

@all 为什么你们将其标记为负面...因为我也尝试并粘贴了我的代码:(

你能把setSportsCornerState的代码贴出来吗？它是否返回具有有效负载属性的对象？这看起来不像我见过的 redux 调度，它们通常有一个动作和一个有效负载，但我猜那个东西是由那个方法返回的？因为如果不是，我打赌那是你的问题。

@OceansOnPluto 嘿，谢谢您的回复...我对您的解释有点困惑...在下面提供我的代码 ``` export function setSportsCornerState(stateString) return type: 'SET_HEADERPANEL' , 状态字符串 ; ```

@OceansOnPluto 我是 js 的初学者...你能在我的测试用例中更新吗:(

【参考方案1】：

基本上，您的减速器在状态上调用属性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 ; 
 

这个集合就是payload对象作为你想要传递的信息。然后你的reducer，应该在payload对象上寻找exists属性。

【讨论】：

感谢您的回复...您能否在以下要点中更新测试用例gist.github.com/js08/dfeab2df8b68240297eb

我的意思是，这不是这个网站的真正运作方式，通常你尝试一下，看看它是否有效，如果它有效，你接受我的回答。但是，您需要更改代码。除非您添加有效负载属性，否则测试用例将始终失败，因为 redux 未设置为以任何其他方式工作。

好的...但是测试代码中的这一行我应该如何修改 ``` sidebar= [hasSidebar,id: 100, text: 'hello world'] ` ``

只需将函数更改为我在最后一个代码块中详述的内容，看看是否有效。

好的...但是测试代码中的这一行我应该如何修改 ``` sidebar= [hasSidebar,id: 100, text: 'hello world'] ` ``