在React中破坏状态/道具

时间:2018-08-28 10:45:06

标签: javascript reactjs eslint destructuring

我正在学习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.statethis.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 })
            );
    }
};

在此先感谢您,并对新手问题表示歉意。

3 个答案:

答案 0 :(得分:8)

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

您可以在此处阅读有关这两个规则的更多信息:

react/destructuring-assignment

react/no-access-state-in-setstate

答案 1 :(得分:1)

解构基本上是 syntatic糖。某些Eslint配置更喜欢它(我想这是您的情况)。

基本上是声明值,并使它们等于您不想重复的语法,例如,给定react道具:

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

已变形--->

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

因此,现在您可以只使用房屋,狗或任何您想要的东西。 它通常与状态和道具一起使用,这里有更多文档,希望对您有所帮助。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

答案 2 :(得分:0)

这是您的onChange方法的问题。尝试这样的事情:

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

并查看https://reactjs.org/docs/state-and-lifecycle.html中的“状态更新可能是异步的”部分