javascript 在 React 中解构 state/props
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52055987/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Destructuring state/props in React
提问by dragi
I'm learning React and I have Eslint installed in my project. It started giving me errors like
我正在学习 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)
I tried to look this up but couldn't understand properly.
我试图查找这个，但无法正确理解。
Can someone point me in the right direction with this?
有人可以指出我正确的方向吗？
Here is my code that throws the errors:
这是我抛出错误的代码：
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,
}),
);
}
};
}
As I understand I would need to destructure this.stateand this.propsbut how?
据我了解，我需要解构this.state，this.props但如何解构？
EDIT: 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.
在此先感谢并为新手问题感到抱歉。
回答by Joliver
What eslint is telling you with the react/destructuring-assignmentserror is that assignments like:
eslint 告诉你的react/destructuring-assignments错误是这样的分配：
const data = this.state.data;
can be rewritten into:
可以改写为：
const { data } = this.state;
This also works for function arguments, so:
这也适用于函数参数，因此：
onChange = e => { ... }
can be written as
可以写成
onChange = ({target: {value, name}}) => { ... }
The next error for react/no-access-state-in-setstatetells you that you are writing:
下一个错误react/no-access-state-in-setstate告诉你你正在写：
this.setState({
data: { ...this.state.data, [e.target.name]: e.target.value }
});
when you should be writing:
当你应该写：
this.setState(prevState => ({
data: { ...prevState.data, [e.target.name]: e.target.value }
}));
or, if you combine it with the react/destructuring-assignmentsrule:
或者，如果您将其与react/destructuring-assignments规则结合使用：
onChange = ({target: {name, value}}) =>
this.setState(prevState => ({
data: { ...prevState.data, [name]: value }
}));
You can read more about those two rules here:
您可以在此处阅读有关这两条规则的更多信息：
react/destructuring-assignment
回答by Kay
Destructuring is basically syntatic sugarSome Eslint configurations prefer it (which I'm guessing is your case).
解构基本上是语法糖一些 Eslint 配置更喜欢它（我猜这是你的情况）。
It's basically declaring the values and making them equal to the bit of syntax you don't want to repeat, for Ex, given react props:
它基本上是声明值并使它们等于您不想重复的语法位，对于 Ex，给定 react props：
this.props.house, this.props.dog, this.props.car
destructured --->
解构 --->
const { house, dog, car } = this.props;
So now you can just use house, or dog or whatever you want. It's commonly used with states and props in react, here is more doc about it, hope it helps. https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
所以现在你可以只使用房子、狗或任何你想要的东西。 它通常与 react 中的 state 和 props 一起使用，这里有更多关于它的文档，希望它有所帮助。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment
回答by Maciej Wojs?aw
This is problem with your onChangemethod. Try something like this:
这是你的onChange方法有问题。尝试这样的事情：
onChange = e =>
this.setState(prevState => ({
data: { ...prevState.data, [e.target.name]: e.target.value }
}));
And look at section "State Updates May Be Asynchronous" from https://reactjs.org/docs/state-and-lifecycle.html
并查看https://reactjs.org/docs/state-and-lifecycle.html 中的“状态更新可能是异步的”部分
