Storybook: ストーリー内で直接Reactフックを使用することはできません

これがバグかどうかはわかりません。 stories.addの2番目の引数は、関数が実際のReactコンポーネントではなく、コンポーネントを返すことを期待していると私は信じています。 関数コンポーネントを外側に移動してみてください。ある程度成功するはずです。

例

function SomeComponent() {
    const [blah] = React.useState('blah');
    return <div> {blah}</div>;
}
stories.add('BlahComponent', () => <SomeComponent />);

stories.addの2番目の引数は、関数が実際のReactコンポーネントではなく、コンポーネントを返すことを期待していると私は信じています。

AFAIKはそれほど重要ではありませんが、常に試す価値があります。 また、 @ sargantは何がエラーをスローしますか？ ストーリーブックまたは型システム？

@Keraitoいいえ、エラーは正しいと確信しています。

これは、reactのコンテキストから関数を呼び出しているためです。別名、ストーリーブックは次のように関数を呼び出します。

const element = storyFn();

ない

const element = <StoryFn />

おそらく、それが機能するように開始した場合です。

今のところ@gabefromutahのアドバイスは正しいです。

実際のコード行は次のとおりです。
https://github.com/storybooks/storybook/blob/next/app/react/src/client/preview/render.js#L24

誰かがこの作品を作るために実験したいのなら、それが出発点だと思います。

@sargant @gabefromutahの提案はあなたのために働きますか？

@ndelangen @gabefromutahの提案は、私の最初の「このストーリーは機能する」という例と同じだと思いますか？

これがバグではない場合でも、状態にサードパーティのプラグインを使用する必要がないようにするための便利な拡張機能である可能性があります。

おそらく、それが機能するように開始した場合です。

@ndelangenは、それが他の特定のアドオン、特に基になるレンダリングされたコンポーネントの小道具などの情報を必要とするaddon-infoとどのように相互作用するかを完全には確信していません。

同じ問題が発生しましたが、これは回避策として行う簡単なハックです。

stories.add('this story fails', () => React.createElement(() => {
  const [state, setState] = React.useState(5)
  return (
    <button onClick={() => setState(state + 1)}>
      {state}
    </button>
  )
}))

ハッキングなしでネイティブにサポートされた方がはるかに良いと思います。 メンテナも同意すれば、PRを考え出す時間を見つけることができるかもしれません🙂。

@ kevin940726それは素晴らしいでしょう👍

私の.storybook / config.jsに以下を追加するとうまくいきました

addDecorator((Story) => <Story />)

私は似たようなものを実装しましたが、それはたくさんのアドオン、特に小道具のドキュメントを出力するためのアドオン情報を壊すと思います。 私はフックを使用することがその情報よりも重要であると判断しました（とにかくそれを別々に生成するので）が、それが一般的なストーリーブックのすべてに当てはまるとは思えません。 reactの外でapiのようなフックをどのように処理するかわかりません。

ソースコードに実装しようとしましたが、storyshot-addonで動作させるのに苦労しています。 すべてのスナップショットで新しい親ノードが生成されるため、これは重大な変更になると思います。 ユーザーが選択するレンダラーを制御できないため、1レベル深く潜ることはできません。 ソリューションを文書化し、ユーザーがオプトインするためのヘルパーAPIを提供するなど、他の代替案を検討する必要があると思います。

私の.storybook / config.jsに以下を追加するとうまくいきました

addDecorator((Story) => <Story />)

@emjaksaこのスニペットを提供して

これは、この問題に対する私の回避策でした。

import React, { useState } from 'react';

import { storiesOf } from '@storybook/react';
import { action } from '@storybook/addon-actions';
import { withInfo } from '@storybook/addon-info';

import SelectField from 'component-folder/SelectField';

/**
 * special wrapper that replaces the `value` and `onChange` properties to make
 * the component work hooks
 */
const SelectFieldWrapper = props => {
  const [selectValue, setValue] = useState('');

  return (
    <SelectField
      {...props}
      value={selectValue}
      onChange={e => {
        setValue(e.target.value);
        action('onChange')(e.target.value);
      }}
    />
  );
};
SelectFieldWrapper.displayName = 'SelectField';

const info = {
  text: SelectField.__docgenInfo.description,
  propTables: [SelectField],
  propTablesExclude: [SelectFieldWrapper]
};

storiesOf('Controls/SelectField', module)
  .addDecorator(withInfo)

  // ... some stories

  // this example uses a wrapper component to handle the `value` and `onChange` props, but it should
  // be interpreted as a <SelectField> component
  .add('change handler', () => 
    <SelectFieldWrapper
      id="employment-status"
      placeholder="some placeholder"
      value={//selectValue}
      onChange={e => {
          // setValue(e.target.value);
      }}
    />, { info });

私が述べたように、それでも回避策ですが、それは機能し、 infoアドオンを壊しません。 （私は他のアドオンをテストしていません）

ストーリーデコレータを最後に追加した場合、情報アドオンは壊れません。

import React from 'react'

import { configure, addDecorator } from '@storybook/react'
import { withInfo } from '@storybook/addon-info'
import { withKnobs } from '@storybook/addon-knobs'

const req = require.context('../src', true, /\.stories\.js$/)

function loadStories() {
  req.keys().forEach(filename => req(filename))
}

addDecorator(
  withInfo({
    header: false,
  }),
)
addDecorator(withKnobs)
addDecorator((Story) => (
    <Story />
))

configure(loadStories, module)

さらに別の回避策：

UseStateというユーティリティコンポーネントが次のように定義されています。

export const UseState = ({ render, initialValue }) => {
    const [ variable, setVariable ] = useState(initialValue)
    return render(variable, setVariable)
}

そして、私はこのような物語でそれを使用します：

.add('use state example', () => (
    <UseState
        initialValue={0}
        render={(counter, setCounter) => (            
            <button onClick={() => setCounter(counter + 1)} >Clicked {counter} times</button>
        )}
    />
)

しかし、私は@ kevin940726の回避策が一番好きです

状態の変化についてストーリーを再レンダリングすることができません。 強制的な再レンダリングも機能しません。

このコードはReactフックにはうまく機能しますが

storiesOf("Dropdowns", module).add("Basic", () => <DropdownBasicStory />);

@storybook/addon-infoではうまく機能しません：

これにより、この回避策は使用できなくなります。 何か案は？ ストーリーブック5.1.0-beta.0

@artyomtrityak addon-infoのpropTablesオプションを上書きできますか？ 今後のaddon-docsこれを適切に解決します： https ：

@shilmanには、 <DropdownBasicStory />ソースも含まれますか？

@artyomtrityak私に何ができるか見ていきます😆

皆さんこんにちは！ 最近、この問題はあまり進んでいないようです。 それでも質問、コメント、バグがある場合は、遠慮なく議論を続けてください。 残念ながら、すべての問題に取り組む時間はありません。 私たちはいつでも寄付を受け付けていますので、サポートが必要な場合はプルリクエストを送信してください。 非アクティブな問題は30日後にクローズされます。 ありがとう！

他の誰かがまだこれを取得している場合、問題は機能コンポーネントに小道具タイプを追加しているようです。

const Dropdown = () => (
  // component content
);

Dropdown.propTypes = {
  ...
}

何らかの理由で.propTypesコメントアウトすると、うまくいくようです。 ドキュメントの解析などの小道具の種類に問題があるかどうかはわかりません。

フック付きのコンポーネントのソースコードを表示するには

function WithState({ children }) {
  const [value, setValue] = React.useState([]);

  return React.cloneElement(children, {
    value,
    onChange: event => setValue(event.target.value),
  });
}

storiesOf(`${__dirname}`, module).add('Basic', () => (
  <WithState>
    <select value="[parent state]" onChange="[parent func]">
      <option value="Australia">Australia</option>
      <option value="Cambodia">Cambodia</option>
    </select>
  </WithState>
));

皆さんこんにちは！ 最近、この問題はあまり進んでいないようです。 それでも質問、コメント、バグがある場合は、遠慮なく議論を続けてください。 残念ながら、すべての問題に取り組む時間はありません。 私たちはいつでも寄付を受け付けていますので、サポートが必要な場合はプルリクエストを送信してください。 非アクティブな問題は30日後にクローズされます。 ありがとう！

上記のReact.createElementと<Story />アプローチには注意してください。実際には、reactコンポーネント（ストーリーコンポーネント）を返すのではなく、再作成しているため、正しくない場合もあると思います。レンダリングされた要素（ドキュメントに示されているように、ストーリーブックconfig.js story()を使用している間）。

たとえば、ストーリーにコンポーネントのローカル状態の更新をトリガーするKnobs.buttonある場合、ボタンをクリックした後、現在のコンポーネントの状態を更新する代わりに、新しいストーリーコンポーネントを作成している可能性があります。

この単純なコードスニペットで私の仮定を確認できます。このスニペットでは、ノブボタンをクリックしても値は更新されません。

storiesOf('Test', module).add('with text', () => {
  return React.createElement(() => {
    const [value, setValue] = React.useState(1);

    Knobs.button('Increase', () => setValue(prev => prev + 1));

    return <span>{value}</span>;
  });
});

それを機能させるには、次のことができます。

function MyStory() {
  const [value, setValue] = React.useState(1);

  Knobs.button('Increase', () => setValue(prev => prev + 1));

  return <span>{value}</span>;
}

storiesOf('Test', module).add('with text', () => <MyStory />);

したがって、回避策として、ラッパーを作成しました。

import {
  DecoratorParameters,
  Story,
  StoryDecorator,
  storiesOf as origStoriesOf,
} from '@storybook/react';

class ReactStory {
  private readonly story: Story;

  constructor(name: string, module: NodeModule) {
    this.story = origStoriesOf(name, module);
  }

  public add(
    storyName: string,
    Component: React.ComponentType,
    parameters?: DecoratorParameters
  ): this {
    this.story.add(storyName, () => <Component />, parameters);
    return this;
  }

  public addDecorator(decorator: StoryDecorator): this {
    this.story.addDecorator(decorator);
    return this;
  }

  public addParameters(parameters: DecoratorParameters): this {
    this.story.addParameters(parameters);
    return this;
  }
}

new ReactStory('Test', module).add('with text', () => {
  const [value, setValue] = React.useState(1);

  Knobs.button('Increase', () => setValue(prev => prev + 1));

  return <span>{value}</span>;
});

オプションで、ストーリーブックAPIを模倣してリファクタリングのオーバーヘッドを削減し、問題が修正された後で元に戻すことができます。

export function storiesOf(name: string, module: NodeModule) {
  return new ReactStory(name, module);
}

私は間違っているかもしれません、もしそうなら、私に知らせてください。 大変感謝いたします！

タダ!! この問題を参照するPR＃7571を含むhttps://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.10をリリースしました。 今すぐアップグレードしてお試しください！

このプレリリースは@next NPMタグにあります。

この問題を閉じます。 まだまだやることがあると思われる場合は、再度開いてください。

@shilmanありがとう！ 使用方法のコードスニペットの例はありますか？

@shiranZe sure do: https://github.com/storybookjs/storybook/blob/next/examples/official-storybook/stories/demo/button.stories.js#L26

@shilmanありがとうございます！
しかし、それでもエラーが発生します：
React Hook "useState"は、React関数コンポーネントでもカスタムReactHook関数でもない関数 "component"で呼び出されます。

@shiranZe最近の5.2ベータ版を使用していますか？

@shilmanはい...

stories / components / Menu / index.jsの私のコード：

constコンポーネント=（）=> {
const [buttonEl、setButtonEl] = useState（null）

const handleClick = (event) => {
    console.log('the event', event)
    setButtonEl(event.currentTarget)
}

return (
    <>
        <IconButton iconName={"menu-hamburger"} size="s" onClick={handleClick} color={"midGray"}></IconButton>

デフォルトのエクスポート[readme、component];

およびstories / components / index.js内：
storiesOf('Components', module) .addDecorator(withKnobs) .add('Text', withReadme(...Menu))

@shiranZe addon-readmeの問題だと思います-多分そこに問題を提出しますか？

返信ありがとうございます@shilman 。 それが問題かどうかはわかりません。 addon-readmeなしで試しましたが、同じエラーが発生します。 5.2ベータ版のストーリーブックのURLはありますか？
https://storybooks-official.netlify.com/ （その他|デモ/ボタン）を見てみました
しかし、reactフックの例は見つかりません。

5.2.0-beta.30にはまだ問題がありますが、ノブアドオンも使用しているため、回避策が機能していません。

@shiranZe私たちのnetlifyデプロイはオフになっています（cc @ndelangen）が、 nextブランチのリポジトリをチェックしてそこで試すことができます。

@sourcesoftノブに関連する「プレビューフック」の問題（cc @Hypnosphi）は、この問題とは何の関係もないと思います。共通しているのはフックの概念だけです。

@shilmanありがとう、私はあなたが正しいと思います。 ところで、試行錯誤で修正する方法を見つけ、カスタムフックを変更しました。

export const useField = (id, updateField) => {
  const onChange = useCallback((event) => {
    const {
      target: { value },
    } = e;
    updateField(id, value);
  };

  return {
    onChange,
  };
}, []);

に

export const useField = (id, updateField) => {
  const onChange = (event) => {
    const {
      target: { value },
    } = e;
    updateField(id, value);
  };

  return {
    onChange,
  };
};

基本的に、ここでuseCallbackの使用を削除しました。 最初のバージョンが有効なフックであったかどうかはわかりませんが、以前は機能していました。 また、エラーがHooks can only be called inside the body of a function component場合や、Reactの複数のバージョンがある場合は、少し混乱します。

上記の例では、 useCallback削除した後、実際にuseFieldフックを登録すること

ノブ付きのフックの使用に問題があるようです。 誰かが簡単な再現を提供できるなら、私はそれを見て喜んでいます

@shilman以前に投稿した例を試しましたか？ スニペットは次のとおりです。

storiesOf('Test', module).add('with text', () => {
  return React.createElement(() => {
    const [value, setValue] = React.useState(1);

    Knobs.button('Increase', () => setValue(prev => prev + 1));

    return <span>{value}</span>;
  });
});

古いAPIを使用していますが、テスト用に最新のAPIに簡単に変換できるはずです。 元の投稿から予想される動作を見つけることができます。

@zhenwenc参考までに、コードは機能しますが、 react-docgen-typescript-webpack-pluginによってレンダリングされたドキュメントの使用を中断します。

回避策は少し脆弱で、他のライブラリと競合しているようです。 別の方法として、誰かが使用した経験がありますか？： https ：

ここでエラーメッセージをグーグルで検索している人のために：

クラスコンポーネントをフック付きの機能コンポーネントに変更し、 useStateが@storybook/addonsから誤ってインポートされたときに、このエラーが発生しました。 私はから来て、それを必要とreactではなく@storybook/addons自動インポートが失敗します...。

@orpheusのスニペットのリクエストに答えるだけです

私の.storybook / config.jsに以下を追加するとうまくいきました
addDecorator((Story) => <Story />)

@emjaksaこのスニペットを提供して

diff --git a/.storybook/config.js b/.storybook/config.js
--- a/.storybook/config.js
+++ b/.storybook/config.js
@@ -1,6 +1,9 @@
-import { configure } from '@storybook/react';
+import { configure, addDecorator } from '@storybook/react';
+import React from 'react';

 // automatically import all files ending in *.stories.js
 configure(require.context('../stories', true, /\.stories\.js$/), module);
+
+addDecorator((Story) => <Story />);

結果（完全な.storybook/config.js ）：

import { configure, addDecorator } from '@storybook/react';
import React from 'react';

// automatically import all files ending in *.stories.js
configure(require.context('../stories', true, /\.stories\.js$/), module);

addDecorator((Story) => <Story />);

これがストーリーブック内でreactフックを機能させるための最良の方法かどうかはわかりませんが、ストーリーブックを独自のコンポーネントでラップする<Story />コンポーネントはここで"@storybook/react": "^5.2.6", 。

これを行う前に、ノブ（つまり、ブール値）を更新するたびに、最初のレンダリングで機能しましたが、その後レンダリングを停止しました。 上記の解決策はそれを修正しました。 ところで、ストーリーブックで反応フックを使用するのが良い習慣かどうかはわかりません。可能であればすべてをモックするだけです。おそらくこの方法の方が良いでしょう。

バグを説明する

ストーリーでフックを直接使用することはできません。 Hooks can only be called inside the body of a function componentで失敗します。

再現するには

コード例：

import React from 'react'

import { storiesOf } from '@storybook/react'

const stories = storiesOf('Hooks test', module)

const TestComponent: React.FC = () => {
  const [state, setState] = React.useState(5)
  return (
    <button onClick={() => setState(state + 1)}>
      {state}
    </button>
  )
}

stories.add('this story works', () => <TestComponent />)

stories.add('this story fails', () => {
  const [state, setState] = React.useState(5)
  return (
    <button onClick={() => setState(state + 1)}>
      {state}
    </button>
  )
})

予想される行動
最初のストーリーは正常に機能し、2番目のストーリーは最初のレンダリングで失敗します

バージョン
@storybook/[email protected]
[email protected]
[email protected]

======================================

矢印機能を使用して機能コンポーネントを作成しないでください。
以下の例の1つとして実行します。

function MyComponent(props) {
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
}

または

//IMPORTANT: Repeat the function name

const MyComponent = function MyComponent(props) { 
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
};

「ref」（おそらくループ内）に問題がある場合、解決策はforwardRef（）を使用することです。

// IMPORTANT: Repeat the function name
// Add the "ref" argument to the function, in case you need to use it.

const MyComponent = React.forwardRef( function MyComponent(props, ref) {
  const [states, setStates] = React.useState({ value: '' });

  return (
    <input
      type="text"
      value={states.value}
      onChange={(event) => setStates({ value: event.target.value })}
    />
  );
});

これはMDXでどのように達成できますか？

@adeelibr https://github.com/storybookjs/storybook/blob/17dcfb84194c9876d4452aae123443f9748f62b6/examples/official-storybook/stories/demo/button.stories.mdx#counter -w code

しかし、それでもエラーが発生します：
React Hook "useState"は、React関数コンポーネントでもカスタムReactHook関数でもない関数 "component"で呼び出されます。
https://github.com/storybookjs/storybook/issues/5721#issuecomment -518225880

私はこれとまったく同じ問題を抱えていました。 修正は、名前付きストーリーのエクスポートを大文字にすることです。

 'react'からReactをインポートします。
 './Foo'からFooをインポートします。

デフォルトのエクスポート{
 タイトル： 'Foo';
 };

 export const Basic =（）=> <Foo />

ドキュメントには時価総額が推奨されると書かれていますが、その警告を消したい場合は必要です。

私の場合、問題は、使用していたフックをインポートするのを忘れたことでした。

私の.storybook / config.jsに以下を追加するとうまくいきました

addDecorator((Story) => <Story />)

@emjaksaありがとう！ Storybook v5.3でテストされ、正常に動作しています。

同じ問題が発生しました。機能的なreactコンポーネントにuseState(value)あり、 valueがKnobsから新しい値を再レンダリングしません

Reactドキュメントから：

実用的なソリューションStorybookv5.3：

Preview.jsを更新します

.storybook/preview.js

import React from 'react'; // Important to render the story
import { withKnobs } from '@storybook/addon-knobs';
import { addDecorator } from '@storybook/react';

addDecorator(withKnobs);
addDecorator(Story => <Story />); // This guy will re-render the story

また、main.jsを更新します

.storybook/main.js

module.exports = {
  stories: ['../src/**/*.stories.jsx'],
  addons: [
    '@storybook/preset-create-react-app',
    '@storybook/addon-knobs/register', // Attention to this guy
    '@storybook/addon-actions',
    '@storybook/addon-links',
  ],
  webpackFinal: async config => {
    return config;
  },
};

❓
この呼び出しデコレータがフックを機能させる理由を誰かが知っていますか？

`` `tsx
SomeComponent.decorators = [（Story）=> ]

@tmikeschuこれは、 <Story />がフックに必要なReact.createElementでコードをラップしているためです。

@shilmanありがとうございます！