故事书未呈现故事，错误：“ useContext（...）未定义”

Question

如果我为以下组件创建一个故事，那么我只会在红色框中看到几条消息，其中不包含任何信息，我可以从中获得任何见识。

import React, { useState, useContext } from "react";
import { FormGroup, FormControl, Col } from "react-bootstrap";
import Button from "../button/Button";
import AuthContext from "../../AuthContext";
import { useHistory } from "react-router-dom";
import LoginWarning from "./LoginWarning";

export function Login(props) {
  const [email, setEmail2] = useState("");
  const [password, setPassword] = useState("");
  const [showAlert, setShowAlert] = useState(false);
  const {
    setRole,
    setName,
    setEmail,
    setSessionId,
    setLocalStorage
  } = useContext(AuthContext);
  let history = useHistory();

  function validateForm() {
    return email.length > 0 && password.length > 0;
  }

  const loginPost = {
    email: email,
    password: password
  };

  function handleSubmit(event) {
    event.preventDefault();

    const fetchUserInfo = async () => {
      const result = await fetch(`/account`, {
        method: "GET"
      });
      const body = await result.json();

      console.log(body);
      setRole(body.role);
      setName(body.name);
      setEmail(body.email);
      history.push("/home");
    };

    const fetchAuth = async () => {
      const result = await fetch(`/login`, {
        method: "POST",
        body: JSON.stringify(loginPost),
        headers: {
          "Content-Type": "application/json"
        }
      });
      const body = await result.json();

      console.log(body);
      if (body.isUser === true) {
        setSessionId(body.sessionId);
        setLocalStorage(body.sessionId);
        fetchUserInfo();
      } else {
        setShowAlert(true);
      }
    };
    fetchAuth();
  }

  return (
    <div>
      {showAlert ? <LoginWarning /> : null}
      <form onSubmit={handleSubmit}>
        <Col lg={6}>
          <FormGroup controlId="email" bsSize="large">
            <label>Email</label>

            <FormControl
              autoFocus
              type="email"
              value={email}
              onChange={e => setEmail2(e.target.value)}
            />
          </FormGroup>
        </Col>
        <Col lg={6}>
          <FormGroup controlId="password" bsSize="large">
            <label>Passwort</label>
            <FormControl
              value={password}
              onChange={e => setPassword(e.target.value)}
              type="password"
            />
          </FormGroup>
          <Button disabled={!validateForm()} type="submit" text="Login" />
        </Col>
      </form>
    </div>
  );
}

export default Login;

故事看起来像这样：

import React from "react";
import { Login } from "./Login";
import { storiesOf } from "@storybook/react";

export default {
  title: "Login Form"
};

storiesOf("Login Form", module).add("default", () => <Login />);

这就是Storybook所显示的。由于我的组件没有出现在应用程序中，因此我无法弄清楚是什么导致Storybook出现问题：

useHistory@http://localhost:6006/vendors~main.e31f087434cfd38286ae.bundle.js:100829:10
Login@http://localhost:6006/main.e31f087434cfd38286ae.bundle.js:763:84
renderWithHooks@http://localhost:6006/vendors~main.e31f087434cfd38286ae.bundle.js:84742:27
mountIndeterminateComponent@http://localhost:6006/vendors~main.e31f087434cfd38286ae.bundle.js:87276:13
beginWork$1@http://localhost:6006/vendors~main.e31f087434cfd38286ae.bundle.js:88638:16
callCallback@http://localhost:6006/vendors~main.e31f087434cfd38286ae.bundle.js:68837:14
invokeGuardedCallbackDev@http://localhost:6006/vendors~main.e31f087434cfd38286ae.bundle.js:68886:16
invokeGuardedCallback@http://localhost:6006/vendors~main.e31f087434cfd38286ae.bundle.js:68941:31
beginWork$$1@http://localhost:6006/vendors~main.e31f087434cfd38286ae.bundle.js:94239:28
performUnitOfWork@http://localhost:6006/vendors~main.e31f087434cfd38286ae.bundle.js:93166:12
workLoopSync@http://localhost:6006/vendors~main.e31f087434cfd38286ae.bundle.js:93139:22
performSyncWorkOnRoot@http://localhost:6006/vendors~main.e31f087434cfd38286ae.bundle.js:92738:11
scheduleUpdateOnFiber@http://localhost:6006/vendors~main.e31f087434cfd38286ae.bundle.js:92166:28
updateContainer@http://localhost:6006/vendors~main.e31f087434cfd38286ae.bundle.js:95562:15
legacyRenderSubtreeIntoContainer/<@http://localhost:6006/vendors~main.e31f087434cfd38286ae.bundle.js:95986:22
unbatchedUpdates@http://localhost:6006/vendors~main.e31f087434cfd38286ae.bundle.js:92901:12
legacyRenderSubtreeIntoContainer@http://localhost:6006/vendors~main.e31f087434cfd38286ae.bundle.js:95985:21
render@http://localhost:6006/vendors~main.e31f087434cfd38286ae.bundle.js:96073:12
render/<@http://localhost:6006/vendors~main.e31f087434cfd38286ae.bundle.js:20472:26
render@http://localhost:6006/vendors~main.e31f087434cfd38286ae.bundle.js:20471:10
_callee$@http://localhost:6006/vendors~main.e31f087434cfd38286ae.bundle.js:20563:20
tryCatch@http://localhost:6006/vendors~main.e31f087434cfd38286ae.bundle.js:19561:40
invoke@http://localhost:6006/vendors~main.e31f087434cfd38286ae.bundle.js:19787:30
defineIteratorMethods/

浏览器控制台显示以下内容：

The above error occurred in the <Login> component:
    in Login (at Login.stories.js:10)
    in AuthProvider (at Login.stories.js:10)
    in storyFn
    in ErrorBoundary

React will try to recreate this component tree from scratch using the error boundary you provided, ErrorBoundary. react-dom.development.js:21810
    React 18
    render render.js:70
    render render.js:69
    _callee$ render.js:161
    Babel 8
    _callee$ start.js:408
    Babel 8
    renderUI start.js:453
    emit index.js:180
    setSelection story_store.js:325
TypeError: "useContext(...) is undefined"
    useHistory react-router.js:706
    Login Login.js:19
    React 16
    render render.js:70
    render render.js:69
    _callee$ render.js:161
    Babel 8
    _callee$ start.js:408
    Babel 8
    renderUI start.js:453
    emit index.js:180
    setSelection story_store.js:325

Answer 1

如果您的组件使用useContext()，则实际上必须初始化上下文。故事书的入口点与应用程序不同，因此除非您自己进行，否则所有正常的应用程序初始化都不会发生。

最简单的方法是使用装饰器（请参见https://storybook.js.org/docs/addons/introduction/）。

要全局执行此操作，请在.storybook/config.js中添加以下内容：

const StorybookWrapper = (storyFn) => (
  <YourContextProvider>
    {storyFn()}
  </YourContextProvider>
);
addDecorator(StorybookWrapper);

Answer 2

您可以如下创建自定义上下文装饰器

----- Button.js ----- 
export const Button = (props) => {
  const { state, dispatch } = useContext(BoxContext);
  return <button>{state.name}</button>
}
/*I had useContext in Button.js so need to
 create ContextDecorator*/

----- ContextDecorator.js -----
import React, { useReducer, createContext } from 'react';
import { initialState } from '../../App';
import { reducer } from '../../Context/Reducer';

export const BoxContext = createContext();

export const ContextDecorator = (props) => {
const [state, dispatch] = useReducer(reducer, initialState);
  return <BoxContext.Provider value={{state,dispatch}}>
     {props.children}
     </BoxContext.Provider>
}

----- AddButton.stories.js -----
import React from 'react';
import {Button} from './Button';
import { ContextDecorator } from './ContextDecorator';
export default {
  title: 'Example/AddButton',
  component: Button,
  decorators:[(Story) => {
      return <ContextDecorator><Story /></ContextDecorator>
  }],
  argTypes: {
      onClick: {
          action:'clicked'
      },
    backgroundColor: { control: 'color' },
    
  },
};

export const SampleAddButton = (args) => <Button {...args} />