gpt4 book ai didi

javascript - 在 React 中解构状态/ Prop

转载 作者:搜寻专家 更新时间:2023-11-01 04:53:26 31 4
gpt4 key购买 nike

我正在学习 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 但如何解构?

编辑:遵循以下建议后,我最终得到了这个。我现在需要修复的只是 Prop 。它要求我使用解构 Prop 分配。

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

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

react/destructuring-assignment

react/no-access-state-in-setstate

关于javascript - 在 React 中解构状态/ Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52055987/

31 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com