故事书错误无法读取未定义的属性“位置”答案

【问题标题】：Storybook error Cannot read property 'location' of undefined故事书错误无法读取未定义的属性“位置”
【发布时间】：2020-09-14 21:35:21
【问题描述】：

我正在尝试让我的 Storybook 与我的 React 应用程序一起工作。我正在使用 redux 4.0.1。

我不能使用我也使用 redux 的特定组件。这是我得到的错误：

Storybook 错误无法读取未定义的属性“位置”

这是我的devDependencies：

  "devDependencies": {
    "@babel/core": "^7.10.0",
    "@storybook/addon-actions": "^5.3.19",
    "@storybook/addon-links": "^5.3.19",
    "@storybook/addons": "^5.3.19",
    "@storybook/react": "^5.3.19"
  }

我的组件Navbar.js：

import React, { Component } from "react";
import { connect } from "react-redux";

class Navbar extends Component {
  render() {
    const { user } = this.props.auth;
    return (
      <div className="navbar-fixed">
        <nav className="z-depth-0">Hello, {user.name} </nav>
      </div>
    );
  }
}
const mapStateToProps = state => ({
  auth: state.auth
});
export default connect(
  mapStateToProps
)(Navbar);

还有我的故事2-Navbar.stories.js：

import React from 'react';
import Provider from '../src/Provider.js'
import configureStore from "../src/configureStore";
import Navbar from '../src/components/layout/Navbar';

export default {
  title: 'Navbar',
  decorators: [storyFn => <Provider store={ configureStore }>{storyFn()}</Provider>]
};

export const Yay = () => <Navbar />;

我想使用“模拟”数据传递到我的导航栏（如名称和头像 url），否则我会遇到 redux 错误。

感谢任何帮助。

【问题讨论】：

标签： javascript reactjs redux storybook

【解决方案1】：

升级 StoryBook 后我遇到了同样的问题。我找到的解决方法是删除 node_modules 文件夹、.storyBook 文件夹，删除 package-lock.json，并删除 package.json 中对 StoryBook 的任何引用。之后运行“npx sb init”和“npm install”。然后“npm run storybook”，问题就解决了！

【讨论】：