web-dev-qa-db-fra.com

Réinitialisation de l'état initial dans React + ES6

J'ai une classe, ElementBuilder ci-dessous, et lorsque l'utilisateur enregistre la Element qu'il a construite, je souhaite que l'état soit réinitialisé sur les valeurs ci-dessous.

J'ai quelques fonctions dans cette classe que je n'ai pas fournies mais qui changent l'état de title, size et color. 

Dans ES 5, j'aurais une fonction getInitialState sur ma classe et pourrais appeler this.getInitialState() dans une fonction.

Cet élément vit dans mon application pendant le cycle de vie d'un utilisateur connecté et je souhaite que les valeurs par défaut soient toujours les mêmes quel que soit l'utilisation passée.

Comment y parvenir sans écrire une fonction qui définit un objet de valeurs par défaut (ou peut-être que c'est 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() });
    }
}
javascriptreactjsecmascript-6
8
Zack Shapiro

Vous pouvez utiliser une fonction de lecture:

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

        this.state = this.initialState;
    }

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

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

ou juste une variable:

constructor(props) {
    super(props);

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

En utilisant les champs de classe proposés, vous pouvez 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)
    }
}
2
wolverine ks

Puisque l'état initial ne semble dépendre d'aucune instance spécifique, définissez simplement la valeur en dehors de la classe:

const initialState = {...};

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

        this.state = initialState;
    }

    resetBuilder() {
        this.setState(initialState);
    }
}
1
Felix Kling

Utiliser un composant d'ordre élevé pour effacer l'état du composant (render)

Exemple Element.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
0
Charles Romney