在handleFormSubmit之后，React复选框总是返回false

Question

当我提交表单时；阳台；无论是否选中，始终为false。在渲染开始时的console.log中，当我选中该框时，状态确实会更新为true，但在数据库中将其POST为false。所有其他值都已正确过帐。我错过了什么？

这是我的代码：

class AddListing extends Component {
constructor(props) {
super(props);
this.state = {
title: "",
address: "",
numberOfRooms: 0,
sqm: 0,
balcony: false,
description: "",
date: Date.now(),
uploadErrorMsg:''
};
this.handleChange = this.handleChange.bind(this);
this.handleFormSubmit = this.handleFormSubmit.bind(this);
this.handleCheckClick = this.handleCheckClick.bind(this);
}
handleChange = (event) => {
const { name, value } = event.target;
this.setState({ [name]: value });
}
handleCheckbox(event) {
this.setState({
[event.target.name]: event.target.checked
})
}
handleCheckClick = () => {
this.setState({ balcony: !this.state.balcony });
}
handleFormSubmit = (event) => {
event.preventDefault();
axios.post(`http://localhost:5555/api/listings`, this.state)
.then((resp) => {
console.log("response ====> ", resp)
this.setState({ title: "", address: "", numberOfRooms: 0, sqm: 0, balcony: false, description: "", date: Date.now() });
this.props.addListingCallback(resp.data);
})
}
render() {
console.log("state", this.state)
return (

<div>
<h3>Add Listing:</h3>
<div>
<form onSubmit={this.handleFormSubmit}>
<label>Title:</label>
<input 
type="text" 
name="title" 
value={this.state.title} 
onChange={e => this.handleChange(e)} />
<br />
<label>Address:</label>
<input 
type="text" 
name="address" 
value={this.state.address} 
onChange={e => this.handleChange(e)} />
<br />
<label>Number of rooms:</label>
<input 
type="number" 
name="numberOfRooms" 
value={this.state.numberOfRooms} 
onChange={e => this.handleChange(e)} />
<br />
<label>sqm:</label>
<input 
type="number" 
name="sqm" 
value={this.state.sqm} 
onChange={e => this.handleChange(e)} />
<br />
<label>Balcony:</label>
<input 
type="checkbox" 
name="balcony" 
checked={this.state.balcony}
value={this.state.balcony} 
onChange={e => this.handleCheckClick(e)} />
<br />
<label>Description:</label>
<textarea 
type="text" 
name="description" 
value={this.state.description} 
onChange={e => this.handleChange(e)} />
<button name="ADD"><input type="submit" value="Submit"/></button>
</form>
</div>
</div>

)
}

我也尝试了handleCheckbox((方法，但结果相同。感谢您的帮助

Answer 1

当您必须根据以前的状态值更新状态时，您应该始终将函数传递给setState，因为setState是异步的。

所以你永远不应该这样做this.setState({ balcony: !this.state.balcony });但还是这样吧this.setState(prevState => { balcony: !prevState.balcony });

此外，在react中，checked属性是包含复选框状态的属性，而不是value属性，因此在复选框输入中不需要值属性。

Answer 2

我正在handleForSubmit方法中获取更新的状态。

Object {title: "", address: "", numberOfRooms: 0, sqm: 0, balcony: true…}
title: ""
address: ""
numberOfRooms: 0
sqm: 0
balcony: true
description: ""
date: 1601488407603
uploadErrorMsg: ""

问题可能是因为在发布响应后重置了状态。

代码库：-https://codesandbox.io/s/silly-jang-qhs8r?file=/src/addListing.js