React表单输入字段不允许我更改值

Question

所以我以前见过这个问题，但以前的答案都没有解决我的问题。我不明白为什么我的React不让我更改输入框中的值。

该状态最初应该由后端的值设置，但当用户在输入框中键入值时，应该进行更改。

• 提前感谢

import React, { Component } from 'react'
class PRForm extends Component {
state = {
pr: this.props.oneFish.pr
}
handleChange = (event) => {
this.setState({
[event.target.name]:event.target.value
})
}
handleSubmit = (event) => {
event.preventDefault();
this.prBackend()
this.prFrontend(event)
}
prFrontend = (event) => {
this.setState({
[event.target.name]:event.target.value
})
}

prBackend = () => {
this.props.oneFish.pr = this.state.pr
fetch(`http://localhost:3000/fish/${this.props.oneFish.id}`, {
method: 'PATCH',
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(this.props.oneFish)
}) 
console.log(this.props.oneFish.pr)
}
render() {
return (
<div className='prForm'>
<div>
<h3 className='PR'>Biggest Catch: {this.state.pr} in. </h3>
</div>
<form onSubmit={this.handleSubmit} className="addPRForm">
<h4 className="pr-title">BIGGEST CATCH</h4>
<input className="inputPR" type="text" name='pr' placeholder="0 in" value={this.state.pr} onChange={this.handleChange}/>
<input className="submitPR" type="submit" value="Submit Size" />
</form>
</div>
)
}
}
export default PRForm

Answer 1

之所以会发生这种情况，是因为react异步更新，所以当react想要更新状态时，事件可能会消失ww来解决这个问题，只是将事件存储在变量中：

handleChange= (event) => {
const {name,value} = event.target
this.setState({
[name]:value
})
}

Answer 2

您将初始状态定义为类属性，因此this.state.pr始终指向您的初始状态。将其移动到构造函数：

constructor(props) {
super(props)
this.state = {
pr: this.props.oneFish.pr
}
}

编辑事实证明这不是真的。仍然会推荐它为"；良好实践"；