在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.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 })

);

}

};

在此先感谢您,并感谢您的新手问题。

回答:

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中破坏状态/道具 的全部内容, 来源链接: utcz.com/qa/397270.html

回到顶部