如何修复setState()给出的复选框的相反值

Question

这是我的类组件：

import React from 'react';
import { Jumbotron, Container, Label } from 'reactstrap';
import './Css.css';
class Settings extends React.Component {
state = {
isChecked: false,
}
isCheck(e) {
this.setState({
isChecked: e.target.checked
})
console.log(e.target.checked)
console.log(this.state.isChecked)
}

render() {
return (
<div className="margin">
<Jumbotron fluid>
<Container fluid>
<h1 className="display-3">Settings</h1>
<div className="groupbox">
<Label className="lead">This is a checkbox</Label>
<input class="apple-switch" type="checkbox" onChange={e => this.isCheck(e)} />
</div>
</Container>
</Jumbotron>
</div>
);
}
}
export default Settings;

我遇到的问题是，我在控制台中得到的值是颠倒的。

因此，当复选框未选中时，e.target.checked为false，但this.state.isChecked为true，当复选复选框选中时，则e.target.checked为true，而this.state.isChecked为false。

我不知道我为什么要面对这个问题。

• 我做错了什么吗

我还试图将e.target.checked存储到const checked，然后将其传递到setState()，但它给了我同样的东西。

感谢您的帮助。

Answer 1

这个问题纯粹是一个日志记录问题。在设置值和查看状态更新之间存在延迟。尝试：

isCheck(e) {
console.log(e.target.checked);
this.setState({
isChecked: e.target.checked
}, () => {
console.log(this.state.isChecked);
});
}

如果您需要在状态更新后执行操作，请将其放入setState调用内的回调函数中，如上所述。原因是setState调用render(这是它的主要用途(，React在准备好后将异步执行此操作。

Answer 2

根据单据

将setState()视为更新组件的请求，而不是立即命令

setState()并不总是立即更新组件。它可能会批处理或推迟更新。这使得在调用setState()之后立即读取This.state成为一个潜在的陷阱。相反，使用componentDidUpdate或setState回调(setState(updater, callback)(，它们中的任何一个都保证在应用更新后激发

所以这里的setState()是异步的，所以在您的情况下，为了查看效果，只需使用回调(这里我使用箭头函数来维护this的上下文(

isCheck(e) {
this.setState(
{
isChecked: e.target.checked,
},
() => {
console.log(e.target.checked)
console.log(this.state.isChecked)
}
)
}