在 React 中解构 state/props答案

【问题标题】：Destructuring state/props in React在 React 中解构 state/props
【发布时间】：2019-02-02 23:25:42
【问题描述】：

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

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

【问题讨论】：

setState 是异步的。因此，如果您致电setState 并使用之前的状态，您可能会使用错误的状态！所以使用回调来获取前一个并以安全的方式使用它。 This 可能会有所帮助
谢谢！我去看看。
嘿，redux 中的...state 是什么意思。如何在 redux 中解构

标签： javascript reactjs eslint destructuring

【解决方案1】：

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

【讨论】：

倒数第二个方式会报错，详情请查看this answer。
这对我有用，我用新问题编辑了我的原始帖子。我现在对州很好。我只需要编辑道具，但它比上面的例子复杂一点。
在这种情况下，您可以写：const {submit} = this.props;，然后调用submit(data).catch(...)。
太棒了。现在有点道理。

【解决方案2】：

解构基本上是语法糖一些 Eslint 配置更喜欢它（我猜是你的情况）。

它基本上是声明值并使它们等于你不想重复的语法，例如，给定 react props：

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

解构--->

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

所以现在你可以使用房子、狗或任何你想要的东西。 常用于 react 中的 state 和 props，这里有更多关于它的文档，希望对你有所帮助。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment

【讨论】：

【解决方案3】：

这是您的 onChange 方法的问题。试试这样的：

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

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

【讨论】：

会报错，详情请查看this answer。