2
votes

Accéder à tout l'objet d'état dans React 16.8

Comme react 16.8 a introduit les hooks de réaction, l'accès et la définition de l'état ont été modifiés. Auparavant, vous aviez accès à tout l'objet d'état avec {this.state} , maintenant que vous accédez directement à votre état, comme {count} vs {this.state.count } Je n'ai pas pu trouver un moyen d'accéder à tout l'objet d'état. Est-il possible de récupérer tout l'objet d'état dans la nouvelle façon d'écrire le composant react?

Pour être plus clair; J'ai un composant React qui prend l'état du composant comme accessoire et l'affiche dans l'interface utilisateur à des fins de débogage. Je sais que je peux utiliser le plugin react mais je trouve qu'il est plus efficace d'afficher l'état dans l'interface utilisateur lorsque je code.

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

const {
  useState
} = React;

function App() {

  class MyComponent extends React.Component {
    constructor(props: RectangularSelectProps) {
      super(props);
      this.state = {
        expanded: false,
        otherStuff: {
          string: 'bla bla'
        }
      };
    }
    render() {
      return ( < React.Fragment >
        Component:
        <div> *** Component Code ** * </div>
        Debug:
        <div style = {{margin: '1rem 0'}} >
        <h3 style = {{fontFamily: 'monospace'}}/> <pre style = {
          {
            background: '#f6f8fa',
            fontSize: '.65rem',
            padding: '.5rem',
          }
        } > {
          JSON.stringify({ ...this.state
          }, null, 2)
        } </pre> </div> </React.Fragment>)
      }
    }

    return ( < div > < MyComponent / > < /div>);
  }

  ReactDOM.render( < App / > , document.getElementById("root"));

reactjs react-hooks

2 commentaires

La réponse simple à votre question est qu'avec les hooks React et useState , il n'y a pas un seul "objet d'état". Il y a autant ou aussi peu de valeurs que vous déclarez. Plus important encore, cela ressemble à un problème XY . Quel problème essayez-vous de résoudre?

Merci d'avoir signalé, j'ai ajouté ce que j'essaie d'accomplir.

3 Réponses :

1
votes

Contrairement à l'état dans un composant de classe, qui contiendrait l'état comme un objet, il n'y a aucune restriction du type d'état avec le hook useState . Il peut prendre l'état sous forme de chaîne, booléen, nombre, objet ou tableau . La seule mise en garde est que setState fusionnerait l'objet d'état mis à jour avec l'état précédent alors que le setter de hooks ne le fait pas. Vous pouvez également avoir plusieurs déclarations useState avec plusieurs types d'états différents dans un composant

Un exemple d'utilisation des hooks useState serait

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

0 commentaires

0
votes

Il n'y a aucun moyen d'accéder à l'état entier si vous le divisez en plusieurs hooks useState , mais vous pouvez toujours utiliser un hook useState avec un objet que vous utilisez comme état pour tout avoir en un seul endroit.

La mise à jour de l'état avec des hooks remplacera cependant tout l'état existant, donc avec cette approche, vous devez le fusionner avec l'objet d'état existant.

Exemple

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

const { useState } = React;

function App() {
  const [state, setState] = useState({ foo: "foo", bar: "bar" });

  return (
    <div>
      <button onClick={() => setState({ ...state, foo: Math.random() })}>
        {state.foo}
      </button>
      <button onClick={() => setState({ ...state, bar: Math.random() })}>
        {state.bar}
      </button>
    </div>
  );
}

ReactDOM.render(<App />, document.getElementById("root"));

0 commentaires

0
votes

Vous pouvez utiliser useReducer pour avoir quelque chose de similaire à ceci .state si vous avez vraiment besoin d'une structure complexe.

0 commentaires