在React中破坏状态/道具 [英] Destructuring state/props in React

问题描述

我正在学习React，并且在我的项目中安装了Eslint。它开始给我类似

I'm learning React and I have Eslint installed in my project. It started giving me errors like

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

我试图查找它，但无法正确理解。

I tried to look this up but couldn't understand properly.

有人可以为此指出正确的方向吗？

Can someone point me in the right direction with this?

这是抛出错误的代码：

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.props ，但是如何？

As I understand I would need to destructure this.state and this.props but how?

编辑：
之后按照下面的建议，我最终做到了这一点。我现在需要修复的只是道具。它要求我使用破坏性道具分配。

After following the suggestions below, I ended up with this. All I need to fix right now is the props. Its asking me to use a destructuring props assignment.

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

在此先感谢您，对于新手问题深表歉意。

Thanks in advance and sorry for the newbie question.

推荐答案

eslint通过 react / destructuring-assignments 错误告诉您的是，分配类似于：

What eslint is telling you with the react/destructuring-assignments error is that assignments like:

const data = this.state.data;

可以重写为：

const { data } = this.state;

这也适用于函数参数，因此：

This also works for function arguments, so:

onChange = e => { ... }

可以写为

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

react / no-access-的下一个错误-设置状态状态告诉您您正在写：

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结合使用规则：

or, if you combine it with the react/destructuring-assignments rule:

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

您可以在此处详细了解这两个规则：

You can read more about those two rules here:

react / destructuring-assignment

反应/ no-access-state-in-setstate

这篇关于在React中破坏状态/道具的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！