web-dev-qa-db-ja.com

Reactの状態/小道具の破壊

私はReactを学んでいます。プロジェクトにEslintをインストールしました。

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

これを調べてみましたが、正しく理解できませんでした。

誰かがこれで正しい方向に私を向けることができますか？

エラーをスローするコードは次のとおりです。

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,
          }),
        );
    }
  };
}

私が理解しているように、this.stateおよびthis.propsしかし、どうやって？

編集：以下の提案に従った後、私はこれで終わった。今修正する必要があるのは小道具だけです。それは破壊的な小道具の割り当てを使用するように私に頼みます。

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 })
            );
    }
};

初心者の質問を事前に感謝し、申し訳ありません。

javascriptreactjseslintdestructuring
5
dragi

Eslintがreact/destructuring-assignmentsエラーで通知するのは、次のような割り当てです。

const data = this.state.data;

次のように書き換えることができます。

const { data } = this.state;

これは関数の引数にも機能します。

onChange = e => { ... }

として書くことができます

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

react/no-access-state-in-setstateの次のエラーは、あなたが書いていることを示しています。

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

いつ書くべきか：

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

または、react/destructuring-assignmentsルールと組み合わせた場合：

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

これら2つのルールの詳細については、こちらをご覧ください。

react/destructuring-assignment

react/no-access-state-in-setstate

13
Joliver

破壊は基本的にシンタティックシュガーいくつかのEslint構成がそれを好む（私はあなたの場合だと思う）。

基本的には、値を宣言し、Exの場合、リアクションプロップを与えて、繰り返したくない構文のビットと等しくすることです。

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

非構造化--->

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

だから今、あなたはちょうど家、または犬またはあなたが望むものを使用することができます。 reactの状態と小道具で一般的に使用されます。これについてのドキュメントがあります。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

2
Kay

これはonChangeメソッドの問題です。次のようなものを試してください：

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

https://reactjs.org/docs/state-and-lifecycle.html の「State Updates May Asynchronous」セクションをご覧ください。

0
Maciej Wojsław