Réinitialisation de l'état initial de Réagir + ES6

J'ai une classe, ElementBuilder ci-dessous, et lorsque l'utilisateur enregistre le Element qu'ils ont construit, je veux de l'état de réinitialiser aux valeurs ci-dessous.

J'ai quelques fonctions dans cette classe que je n'ai pas prévu mais que le changement de l'état de title, size, et color.

Dans l'ES 5, je voudrais avoir un getInitialState fonction de ma classe et pourrait appeler this.getInitialState() dans une fonction.

Cet élément réside dans mon application pour le cycle de vie d'un utilisateur connecté et je veux les valeurs par défaut de toujours être le même quel que soit l'usage.

Comment puis-je réaliser cela sans écrire une fonction qui définit un objet de valeurs par défaut (ou c'est peut-être la réponse)? merci!

class ElementBuilder extends Component {
    constructor(props) {
        super(props);

        this.state = {
            title: 'Testing,
            size: 100,
            color: '#4d96ce',
        };
    }

    resetBuilder() {
        this.setState({ this.getInitialState() });
    }
}

Vous pouvez toujours définir une constante en dehors de la classe avec les valeurs initiales. Puis l'utiliser pour initialiser l'état et de réinitialiser à tout moment.
pour la gestion de l'état qui est robuste, veuillez jeter un oeil à redux avec redux vous pouvez faire toute sorte de choses.e.g défaire, refaire et le temps voyage effortlesly

OriginalL'auteur Zack Shapiro | 2017-07-19

Vous pouvez utiliser une fonction get:

class ElementBuilder extends Component {
    constructor(props) {
        super(props);

        this.state = this.initialState;
    }

    get initialState() {
      return {
          title: 'Testing',
          size: 100,
          color: '#4d96ce',
      };
    }

    resetBuilder() {
        this.setState(this.initialState);
    }
}

ou juste une variable:

constructor(props) {
    super(props);

    this.initialState = {
        title: 'Testing',
        size: 100,
        color: '#4d96ce',
    };
    this.state = this.initialState;
}

Un getter de la fonction est encore une fonction 😉
oh, j'ai oublié le "sans écrire une fonction" 🙂 Mais alors la deuxième option qui semble la bonne.
Juste une remarque, je pense que dans le constructeur, vous devez appeler cette.getInitialState plutôt que cela.initialState et dans le getInitialState fonction, vous devez utiliser cette.setState plutôt que cela.état.
Si le code dans resetBuilder être this.setState(this.initialState);?
bien sûr, merci! J'ai édité la réponse

OriginalL'auteur quotesBro

À l'aide de la proposition de champs de la classe, vous pourriez faire quelque chose comme ceci:

class ElementBuilder extends Component {
    static initialState = {
        title: 'Testing,
        size: 100,
        color: '#4d96ce'
    }

    constructor(props) {
        super(props)

        this.state = ElementBuilder.initialState
    }

    resetBuilder() {
        this.setState(ElementBuilder.initialState)
    }
}

OriginalL'auteur wolverine ks

1

Depuis l'état initial ne semble pas dépendre uniquement de l'instance spécifique, il suffit de définir la valeur en dehors de la classe:
```
const initialState = {...};

class ElementBuilder extends Component {
    constructor(props) {
        super(props);

        this.state = initialState;
    }

    resetBuilder() {
        this.setState(initialState);
    }
}
```
Pourquoi définir initialState comme un class et non une variable?
Faute de frappe, il doit être const. Merci pour cette remarque.

OriginalL'auteur Felix Kling

Utiliser une Forte Composante de l'Ordre pour effacer l'état des composants (rerender)

Exemple De L'Élément.jsx :

//Target ----- //

class Element extends Component {

  constructor(props){
    super(props)
    const {
        initState = {}
    } = props
    this.state = {initState}
  }

  render() {
    return (
        <div className="element-x">
            {...}
        </div>
    )
  }
}

//Target Manager ----- //

class ElementMgr extends Component {

    constructor(props){
        super(props)
        const {
            hash = 0
        } = props
        this.state = {
            hash, //hash is a post.id 
            load: false
        }
    }

    render() {
        const {load} = this.state
        if (load) {
            return (<div className="element-x"/>)
        } else {
            return (<Element {...this.props}/>)
        }
    }

    componentWillReceiveProps(nextProps) {
        const {hash = 0} = nextProps
        if (hash !== this.state.hash) {
            this.setState({load:true})
            setTimeout(() => this.setState({
                hash,
                load:false
            }),0)
        }
    }
}

export default ElementMgr

OriginalL'auteur Charles Romney

Vous devez vous connecter pour publier un commentaire.