web-dev-qa-db-fra.com

est-il possible de React.useState (() => {}) dans React?

est-il possible d'utiliser un function comme mon React état du composant?

exemple de code ici:

// TypeScript 
type OoopsFunction = () => void;

export function App() {
    const [ooops, setOoops] = React.useState<OoopsFunction>(
        () => console.log('default ooops')
    );

    return (
        <div>
            <div onClick={ ooops }>
                Show Ooops
            </div>

            <div onClick={() => {
                setOoops(() => console.log('other ooops'))
            }}>
                change oops
            </div>
        </div>
    )
}

mais cela ne fonctionne pas ... le defaultOoops sera invoqué au tout début, et lorsque vous cliquez sur change oops, les otrher ooops sera connecté à la console sans se connecter immédiatement après avoir cliqué sur Show Ooops encore.

pourquoi ?

est-il possible pour moi d'utiliser une fonction comme état de mon composant?

ou bien React a ses façons spéciales de traiter ces the function state?

reactjstypescriptdefault-valuereact-hooks
12
eczn

Il est possible de définir une fonction dans l'état à l'aide de crochets, mais comme l'état peut être initialisé et mis à jour avec une fonction qui renvoie l'état initial ou l'état mis à jour, vous devez fournir une fonction qui, à son tour, renvoie la fonction que vous souhaitez insérer. Etat.

const { useState } = React;

function App() {
  const [ooops, setOoops] = useState(() => () => console.log("default ooops"));

  return (
    <div>
      <button onClick={ooops}>Show Ooops</button>

      <button
        onClick={() => {
          setOoops(() => () => console.log("other ooops"));
        }}
      >
        change oops
      </button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="root"></div>
20
Tholle

L'implémentation de useState dans React est

export function useState<S>(initialState: (() => S) | S) {
  const dispatcher = resolveDispatcher();
  return dispatcher.useState(initialState);
}

Cela montre que vous pouvez en effet utiliser une fonction comme paramètre et cette fonction doit retourner un type S. Dans votre cas, S serait undefined, car () => console.log(...) ne renvoie rien, bien que vous l'ayez explicitement spécifié comme OoopsFunction.

Donc, si vous voulez stocker une fonction en tant qu'état via useState, vous devez implémenter l'approche de Tholle, où la fonction retourne en fait une fonction et non undefined.

0
Peter Lehnhardt