web-dev-qa-db-fra.com

État / accessoires de déstructuration dans React

J'apprends React et j'ai Eslint installé dans mon projet. Il a commencé à me donner des erreurs comme

Use callback in setState when referencing the previous state. (react/no-access-state-in-setstate)
Must use destructuring state assignment (react/destructuring-assignment)

J'ai essayé de chercher ça mais je n'ai pas pu comprendre correctement.

Quelqu'un peut-il m'orienter dans la bonne direction avec cela?

Voici mon code qui jette les erreurs:

class LoginForm extends React.Component {
  state = {
    data: {
      email: "",
      password: "",
    },
    loading: false,
    errors: {},
  };

  onChange = e =>
    this.setState({
      data: { ...this.state.data, [e.target.name]: e.target.value },
    });

  onSubmit = () => {
    const errors = this.validate(this.state.data);
    this.setState({ errors });

    if (Object.keys(errors).length === 0) {
      this.setState({ loading: true });
      this.props
        .submit(this.state.data)
        .catch(err =>
          this.setState({
            errors: err.response.data.errors,
            loading: false,
          }),
        );
    }
  };
}

Si je comprends bien, je devrais détruire this.state et this.props mais comment?

EDIT: Après avoir suivi les suggestions ci-dessous, je me suis retrouvé avec cela. Tout ce que je dois réparer maintenant, ce sont les accessoires. Il me demande d'utiliser une affectation d'accessoires destructurants.

onChange = ({ target: { name, value } }) =>
    this.setState(prevState => ({
        data: { ...prevState.data, [name]: value }
    }));

onSubmit = () => {
    const { data } = this.state;
    const errors = this.validate(data);
    this.setState({ errors });

    if (Object.keys(errors).length === 0) {
        this.setState({ loading: true });
        this.props
            .submit(data)
            .catch(err =>
                this.setState({ errors: err.response.data.errors, loading: false })
            );
    }
};

Merci d'avance et désolé pour la question du débutant.

javascriptreactjseslintdestructuring
5
dragi

Ce que eslint vous dit avec le react/destructuring-assignments L'erreur est que les affectations comme:

const data = this.state.data;

peut être réécrit en:

const { data } = this.state;

Cela fonctionne également pour les arguments de fonction, donc:

onChange = e => { ... }

peut être écrit comme

onChange = ({target: {value, name}}) => { ... }

L'erreur suivante pour react/no-access-state-in-setstate vous indique que vous écrivez:

this.setState({
    data: { ...this.state.data, [e.target.name]: e.target.value }
});

quand vous devriez écrire:

this.setState(prevState => ({
    data: { ...prevState.data, [e.target.name]: e.target.value }
}));

ou, si vous le combinez avec le react/destructuring-assignments règle:

onChange = ({target: {name, value}}) =>
    this.setState(prevState => ({
        data: { ...prevState.data, [name]: value }
    }));

Vous pouvez en savoir plus sur ces deux règles ici:

réaction/déstructuration-affectation

réagir/pas-d'accès-état-dans-setstate

13
Joliver

La déstructuration est essentiellement du sucre syntaxique Certaines configurations Eslint le préfèrent (ce qui, je suppose, est votre cas).

Il s'agit essentiellement de déclarer les valeurs et de les rendre égales au bit de syntaxe que vous ne voulez pas répéter, pour Ex, compte tenu des accessoires de réaction:

this.props.house, this.props.dog, this.props.car

déstructuré --->

 const { house, dog, car } = this.props;

Alors maintenant, vous pouvez simplement utiliser la maison, le chien ou tout ce que vous voulez. Il est couramment utilisé avec des états et des accessoires dans react , voici plus de doc à ce sujet, j'espère que cela aide. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

2
Kay

C'est un problème avec votre méthode onChange. Essayez quelque chose comme ceci:

onChange = e =>
    this.setState(prevState => ({
        data: { ...prevState.data, [e.target.name]: e.target.value }
    }));

Et regardez la section "Les mises à jour d'état peuvent être asynchrones" de https://reactjs.org/docs/state-and-lifecycle.html

0
Maciej Wojsław