我正在尝试在React中创建一个编辑表单。我可以成功查询我的数据库,并可以看到数据是我的get请求后的预期。然后我想在我的组件上设置各种属性的状态,以便填写我的表单,然后我可以编辑它。
这是我的反应组件
constructor(props) {
super(props);
this.state = {
name: '',
teamName: '',
bio: '',
teamId: '',
uploadedFileCloudinaryUrl: ''
};
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount() {
this.findPlayerById(this.props.params.id)
}
findPlayerById(playerId) {
axios.get("/api/player/" + playerId)
.then(res => {
const player = res.data;
console.log(player);
this.setState({
name: player.name,
teamName: player.teamName,
bio: player.bio,
teamId: player.teamId,
uploadedFileCloudinaryUrl: player.profileImageUrl
});
});
}
这是我呈现的HTML
<div className="form-group">
<label className="control-label">Name</label>
<input type="text" className="form-control" ref="name"
defaultValue={this.state.name}
onChange={this.handleChange.bind(this, 'name')}/>
</div>
我没有得到任何错误,但我认为国家没有在我的承诺中正确设置。我做错了吗?