Définissez directement les objets d'état et appelez setState

Question

Dans mon composant, les données utilisateur existantes sont modifiées. Chaque ensemble de données utilisateur a beaucoup de propriétés. Est-il acceptable de définir la valeur d'un objet comme dans l'exemple ci-dessous. Ou comment serait correct?

getInitialState() { 
    return { 
     user: {age: 0, id: 0, weight: 0, size: 0, ...}, 
    }; 
    }, 

    componentWillReceiveProps: function (nextProps) { 
    this.setState({ 
     user: nextProps.user 
    }); 
    }, 

    editUserAge(age) { 
    this.state.user.age = age; 

    this.setState({ 
     user: this.state.user 
    }); 
    } 

Answer 1

La bonne approche serait d'éviter l'état directement muter comme celui-ci

editUserAge(age) { 
    let user = {...this.state.user}; 
    user.age = age; 

    this.setState({ user }); 
    } 

Answer 2

Vous pouvez utiliser la version fonctionnelle de setState lorsque la valeur que vous souhaitez définir est lié à une certaine valeur de l'état. De cette façon si l'état change au milieu de votre méthode (parce que setState est asynchrone cela peut arriver à tout moment à cause de toute autre méthode) votre changement actuel ne sera pas affecté. Vous devez également éviter de modifier les valeurs d'état précédentes. Vous pouvez utiliser Object.assign(..) pour cela.

Exemple

editUserAge(age) { 
    this.setState((prevState) => { 
    let newUser = Object.assign({}, prevState.user, {age: age}); 
    return { user: newUser }; 
    }); 
}