Storybook: React-Hooks können nicht direkt in einer Story verwendet werden

Ich bin mir nicht sicher, ob dies ein Fehler ist. Ich glaube, und ich könnte mich irren, das zweite Argument von stories.add erwartet, dass eine Funktion eine Komponente zurückgibt und keine tatsächliche React-Komponente. Versuchen Sie, Ihre Funktionskomponente nach außen zu verschieben. Sie sollten Erfolg haben.

Beispiel

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

Ich glaube, und ich könnte mich irren, das zweite Argument von stories.add erwartet, dass eine Funktion eine Komponente zurückgibt und keine tatsächliche React-Komponente.

AFAIK sollte eigentlich keine Rolle spielen, aber es lohnt sich immer, es zu versuchen. Auch @sargant, was wirft den Fehler? Märchenbuch oder das Typensystem?

@ Keraito Nein, ich bin mir ziemlich sicher, dass der Fehler korrekt ist.

Das liegt daran, dass wir die Funktion aus dem Kontext der Reaktion heraus aufrufen. Auch bekannt als Storybook wird die Funktion folgendermaßen aufgerufen:

const element = storyFn();

nicht

const element = <StoryFn />

Möglicherweise funktioniert es, wenn wir es so initiieren würden.

Im Moment ist

Hier ist die eigentliche Codezeile:
https://github.com/storybooks/storybook/blob/next/app/react/src/client/preview/render.js#L24

Wenn jemand experimentieren möchte, um diese Arbeit zu machen, ist dies der Ausgangspunkt, denke ich.

@sargant funktioniert der Vorschlag von @gabefromutah für Sie?

@ndelangen @gabefromutahs Vorschlag ist der gleiche wie mein ursprüngliches Beispiel "Diese Geschichte funktioniert", glaube ich?

Falls dies kein Fehler ist, kann es dennoch eine nützliche Verbesserung sein, um zu vermeiden, dass Plugins von Drittanbietern für den Status verwendet werden müssen.

Möglicherweise funktioniert es, wenn wir es so initiieren würden.

@ndelangen ist sich nicht ganz sicher, wie dies mit anderen bestimmten Addons interagieren wird, insbesondere addon-info , die Informationen wie Requisiten der zugrunde liegenden gerenderten Komponente benötigen.

Wir haben das gleiche Problem festgestellt, und dies ist ein einfacher Hack, mit dem wir es umgehen.

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

Ich bin damit einverstanden, dass es viel besser wäre, wenn es ohne Hacks nativ unterstützt würde. Wenn auch die Betreuer zustimmen, kann ich vielleicht etwas Zeit finden, um eine PR zu entwickeln 🙂.

@ kevin940726 das wäre super 👍

Das Hinzufügen von Folgendem zu meiner .storybook / config.js hat bei mir funktioniert

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

Ich habe etwas Ähnliches implementiert, aber ich denke, das bricht eine Reihe von Addons, insbesondere Addon-Informationen für die Ausgabe der Requisitendokumentation. Ich habe beschlossen, dass die Verwendung von Hooks wichtiger ist als diese Informationen (da ich diese sowieso separat generiere), aber ich bezweifle, dass dies für das gesamte Storybook im Allgemeinen gilt. Keine Ahnung, wie man mit Hooks wie API außerhalb von Reagieren umgehen würde.

Ich habe versucht, es im Quellcode zu implementieren, aber es fällt mir schwer, es mit dem Storyshot-Addon zum Laufen zu bringen. Ich denke, dies wäre eine bahnbrechende Änderung, da in jedem Snapshot ein neuer übergeordneter Knoten generiert würde. Da wir nicht die Kontrolle über den vom Benutzer gewählten Renderer haben, können wir nicht in eine Ebene tief tauchen. Ich denke, wir müssen uns möglicherweise andere Alternativen überlegen, beispielsweise die Lösung der Lösung und möglicherweise eine Hilfs-API, über die sich die Benutzer anmelden können.

Das Hinzufügen von Folgendem zu meiner .storybook / config.js hat bei mir funktioniert

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

@emjaksa Könnten Sie bitte einen Ausschnitt davon zur Verfügung stellen?

Dies war meine Problemumgehung für dieses Problem:

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

Wie ich bereits erwähnt habe, ist dies immer noch eine Problemumgehung, aber es funktioniert und das Addon info beschädigt. (Ich habe keine anderen Addons getestet)

Mein Info-Addon bricht nicht, vorausgesetzt, ich habe zuletzt den Story-Dekorator hinzugefügt.

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)

Noch eine Problemumgehung:

Ich habe eine Dienstprogrammkomponente namens UseState wie

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

Und ich benutze es in solchen Geschichten:

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

Aber ich mag die Problemumgehung von @ kevin940726 am besten

Ich bin nicht in der Lage, die Geschichte bei einem Zustandswechsel erneut zu rendern. Das erneute Rendern erzwingen funktioniert auch nicht.

Dieser Code funktioniert zwar gut für React Hooks

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

Es funktioniert nicht gut mit @storybook/addon-info :

Dies macht diese Problemumgehung unbrauchbar. Irgendwelche Ideen? Storybook 5.1.0-beta.0

@artyomtrityak Sie können die Option propTables in addon-info überschreiben? Ich werde dies in den kommenden addon-docs richtig lösen: https://medium.com/storybookjs/storybook-docs-sneak-peak-5be78445094a

@shilman wird es auch die Quelle von <DropdownBasicStory /> ?

@artyomtrityak Ich werde sehen, was ich tun kann 😆

Hallo allerseits! In dieser Ausgabe scheint in letzter Zeit nicht viel los zu sein. Wenn noch Fragen, Kommentare oder Fehler vorliegen, können Sie die Diskussion fortsetzen. Leider haben wir nicht die Zeit, um zu jeder Ausgabe zu gelangen. Wir sind immer offen für Beiträge. Bitte senden Sie uns eine Pull-Anfrage, wenn Sie helfen möchten. Inaktive Ausgaben werden nach 30 Tagen geschlossen. Vielen Dank!

Wenn jemand anderes dies immer noch bekommt, habe ich festgestellt, dass das Problem darin besteht, einer Funktionskomponente Requisitentypen hinzuzufügen.

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

Dropdown.propTypes = {
  ...
}

Aus irgendeinem Grund scheint es zu funktionieren, wenn Sie .propTypes auskommentieren. Ich bin mir nicht sicher, ob es ein Problem mit den Requisitentypen gibt, die nach Dokumentation oder etwas anderem analysieren.

Anzeigen des Quellcodes von Komponenten mit Hooks

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

Hallo allerseits! In dieser Ausgabe scheint in letzter Zeit nicht viel los zu sein. Wenn noch Fragen, Kommentare oder Fehler vorliegen, können Sie die Diskussion fortsetzen. Leider haben wir nicht die Zeit, um zu jeder Ausgabe zu gelangen. Wir sind immer offen für Beiträge. Bitte senden Sie uns eine Pull-Anfrage, wenn Sie helfen möchten. Inaktive Ausgaben werden nach 30 Tagen geschlossen. Vielen Dank!

Seien Sie vorsichtig mit dem oben genannten Ansatz von React.createElement und <Story /> . Ich denke, dass sie in einigen Fällen nicht ganz richtig sind, da Sie die Reaktionskomponenten (die Story-Komponente) tatsächlich neu erstellen, anstatt die zurückzugeben gerenderte Elemente (unter Verwendung von story() im Storybook config.js wie in den Dokumenten gezeigt).

Wenn Ihre Story beispielsweise Knobs.button , das Aktualisierungen des lokalen Status der Komponente auslöst, erstellen Sie nach dem Klicken auf die Schaltfläche wahrscheinlich eine neue Story-Komponente, anstatt den Status der aktuellen Komponente zu aktualisieren.

Sie können meine Annahme mit diesem einfachen Code-Snippet überprüfen, bei dem der Wert nach dem Klicken auf die Schaltfläche nicht aktualisiert wird.

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

Damit es funktioniert, können Sie Folgendes tun:

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

Daher habe ich als Problemumgehung einen Wrapper erstellt:

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

Optional können Sie die Storybook-API nachahmen, um den Aufwand für das Refactoring zu verringern, und später zurückschalten, wenn das Problem behoben wurde.

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

Ich könnte mich irren, wenn ja, lassen Sie es mich bitte wissen. Sehr geschätzt!

Ta-da !! Ich habe gerade https://github.com/storybookjs/storybook/releases/tag/v5.2.0-beta.10 mit PR # 7571 veröffentlicht, das auf dieses Problem verweist. Aktualisieren Sie noch heute, um es auszuprobieren!

Sie finden diese Vorabversion auf dem @next NPM-Tag.

Schließen Sie dieses Problem. Bitte öffnen Sie erneut, wenn Sie der Meinung sind, dass noch mehr zu tun ist.

@shilman danke !! Haben Sie ein Code-Snippet-Beispiel für die Verwendung?

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

@shilman danke!
aber immer noch den Fehler bekommen:
React Hook "useState" wird in der Funktion "component" aufgerufen, die weder eine React-Funktionskomponente noch eine benutzerdefinierte React Hook-Funktion ist

@shiranZe Verwenden Sie eine aktuelle 5.2-Beta?

@shilman ja ...

Mein Code zu Geschichten / Komponenten / Menü / Index.js:

const component = () => {
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>

Standard exportieren [Readme, Komponente];

und in den Geschichten / Komponenten / index.js:
storiesOf('Components', module) .addDecorator(withKnobs) .add('Text', withReadme(...Menu))

@shiranZe Ich denke, es ist ein Problem mit addon-readme - vielleicht ein Problem dort einreichen?

Vielen Dank an @shilman für Ihre Antwort. Ich weiß nicht, ob das das Problem ist. Ich habe es ohne addon-readme versucht und immer noch den gleichen Fehler erhalten. Haben Sie eine URL für das 5.2-Beta-Storybook?
Ich habe versucht, einen Blick auf https://storybooks-official.netlify.com/ werfen (andere | Demo / Button)
aber ich kann dort das beispiel mit reaktionshaken nicht finden.

Ich habe immer noch das Problem mit 5.2.0-beta.30 und die Sache ist, dass keine der Problemumgehungen für mich funktioniert hat, da ich auch das Knopf-Addon verwende.

@shiranZe Unsere Netlify-Bereitstellung ist deaktiviert (cc @ndelangen), aber Sie können das Repo in der Filiale next überprüfen und dort ausprobieren.

@sourcesoft Ich glaube, dass das knopfbezogene Problem "Vorschau-Hooks" (cc @Hypnosphi) nichts mit diesem Problem zu tun hat - das einzige, was sie gemeinsam haben, ist das Konzept der Hooks.

@shilman Danke, ich denke du hast recht. Übrigens habe ich herausgefunden, wie man es durch Ausprobieren behebt, und den benutzerdefinierten Hook geändert:

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

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

zu

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

  return {
    onChange,
  };
};

Grundsätzlich wurde gerade die Verwendung von useCallback hier entfernt. Ich bin nicht sicher, ob die erste Version ein gültiger Hook war, aber es hat früher funktioniert. Es ist auch etwas verwirrend, wenn der Fehler Hooks can only be called inside the body of a function component lautet oder mehrere Versionen von React haben.

Verwenden Sie in Ihrem obigen Beispiel nach dem Entfernen von useCallback überhaupt die Registrierung eines Hooks in useField ? 🤔

Es hört sich so an, als gäbe es ein Problem bei der Verwendung von Haken mit Knöpfen. Wenn jemand einen einfachen Repro liefern kann, würde ich ihn mir gerne ansehen

@shilman Hast du das Beispiel ausprobiert, das ich zuvor gepostet habe? Hier ist der Ausschnitt:

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

Es verwendet die alte API, sollte sich aber zum Testen leicht in die neueste API umwandeln lassen. Sie können das erwartete Verhalten aus dem ursprünglichen Beitrag finden .

@zhenwenc FYI der Code funktioniert, bricht aber die Verwendung von Dokumenten, die von react-docgen-typescript-webpack-plugin gerendert werden.

Problemumgehung scheint etwas spröde und widersprüchlich zu anderen Bibliotheken. Hat jemand Erfahrung mit?: Https://github.com/Sambego/storybook-state

Für diejenigen hier googeln die Fehlermeldung:

Ich habe diesen Fehler erhalten, als beim Ändern einer Klassenkomponente in eine Funktionskomponente mit Hooks und useState fälschlicherweise aus @storybook/addons importiert wurde. Ich brauchte es, um von react anstatt von @storybook/addons ... der automatische Import schlägt fehl.

Ich beantworte nur

Das Hinzufügen von Folgendem zu meiner .storybook / config.js hat bei mir funktioniert
addDecorator((Story) => <Story />)

@emjaksa Könnten Sie bitte einen Ausschnitt davon zur Verfügung stellen?

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

Ergebnis (komplett .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 />);

Ich bin mir nicht sicher, ob dies der beste Weg ist, um Reaktions-Hooks im Storybook zum Laufen zu bringen, aber das Einwickeln des Storybooks in eine eigene Komponente <Story /> hat hier mit "@storybook/react": "^5.2.6", funktioniert.

Bevor ich dies tat, funktionierte jedes Mal, wenn ich einen Knopf (dh einen Booleschen Wert) aktualisierte, beim ersten Rendern, hörte dann aber beim Rendern auf. Die obige Lösung hat das behoben. Übrigens bin ich mir nicht sicher, ob es eine gute Praxis ist, Reaktionshaken im Storybook zu verwenden. Verspotten Sie einfach alles, wenn möglich. Es ist wahrscheinlich besser so.

Beschreibe den Fehler

Hooks können nicht direkt in einer Story verwendet werden, schlägt mit Hooks can only be called inside the body of a function component fehl.

Reproduzieren

Beispielcode:

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

Erwartetes Verhalten
Die erste Story funktioniert einwandfrei, die zweite Story schlägt beim ersten Rendern fehl

Versionen
@storybook/[email protected]
[email protected]
[email protected]

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

Verwenden Sie keine Pfeilfunktion, um Funktionskomponenten zu erstellen.
Führen Sie eines der folgenden Beispiele aus:

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

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

Oder

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

Wenn Sie Probleme mit "ref" haben (wahrscheinlich in Schleifen), besteht die Lösung darin, forwardRef () zu verwenden:

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

Wie kann dies in MDX erreicht werden?

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

aber immer noch den Fehler bekommen:
React Hook "useState" wird in der Funktion "component" aufgerufen, die weder eine React-Funktionskomponente noch eine benutzerdefinierte React Hook-Funktion ist
https://github.com/storybookjs/storybook/issues/5721#issuecomment -518225880

Ich hatte genau das gleiche Problem. Die Lösung besteht darin, den benannten Story-Export zu aktivieren.

 importieren Reagieren von 'reagieren';
 importiere Foo von './Foo';

 Standard exportieren {
 Titel: 'Foo';
 };

 export const Basic = () => <Foo />

Die Dokumente sagen, dass Groß- und Kleinschreibung empfohlen wird, aber es ist notwendig, wenn diese Warnung verschwinden soll.

In meinem Fall bestand das Problem darin, dass ich vergessen habe, den von mir verwendeten Hook zu importieren.

Das Hinzufügen von Folgendem zu meiner .storybook / config.js hat bei mir funktioniert

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

@ Emjaksa Danke ! Getestet und funktioniert gut auf Storybook v5.3.

Ich hatte das gleiche Problem, meine funktionale Reaktionskomponente hat useState(value) und value hat den neuen Wert von Knobs nicht neu gerendert. Dieses Problem wird durch useState verursacht:

Aus React-Dokumenten:

Arbeitslösung Storybook v5.3:

Aktualisieren Sie die Vorschau.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

Und auch main.js aktualisieren

.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;
  },
};

❓
Weiß jemand, warum dieser aufrufende Dekorateur Haken zum Funktionieren bringt?

`` `tsx
SomeComponent.decorators = [(Story) => ]]

@tmikeschu , weil <Story /> den Code in React.createElement einschließt , was für Hooks notwendig ist.

@shilman danke!