[英]Destructuring state/props in 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 })
);
}
};
提前致谢并抱歉新手问题。
什么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 }
}));
您可以在此处详细了解这两条规则:
解构基本上是合成糖一些Eslint配置更喜欢它(我猜是你的情况)。
它基本上是声明值并使它们等于你不想重复的语法,对于Ex,给出了反应道具:
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
这是你的onChange
方法的问题。 尝试这样的事情:
onChange = e =>
this.setState(prevState => ({
data: { ...prevState.data, [e.target.name]: e.target.value }
}));
从https://reactjs.org/docs/state-and-lifecycle.html查看“状态更新可能异步”部分
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.