javascript - React,js 语法错误 400 请求错误
问题描述
我正在尝试向我的 API 发送一个 Post 请求以做出反应,但我收到了错误的语法错误。我在 StackOverflow 上提到了这篇文章,但我看不出我的代码有什么不同。
React.js,如何将 multipart/form-data 发送到服务器
export default class CapsuleForm extends React.Component {
constructor (props) {
super(props);
this.state = {
userUrl: this.props.auth.domain + "/users/" + this.props.userID,
dateToPost: moment(),
image: "",
caption: "",
redirect: false
};
this.handleChange = this.handleChange.bind(this);
this.handleFormSubmit = this.handleFormSubmit.bind(this);
this.handleDateChange = this.handleDateChange.bind(this);
}
handleFormSubmit(e) {
e.preventDefault();
var form = new FormData()
form.append("user", this.state.userUrl);
form.append("dateToPost", this.state.dateToPost.format());
form.append("image", this.state.image.files[0]);
form.append("caption", this.state.caption);
for (var pair of form.entries()) {
console.log(pair[0]+ ', ' + pair[1]);
}
this.props.auth.postCapsule(
form
).then(() => {
this.setState({redirect: true})
})
.catch(err =>{
alert(err);
})
}
handleDateChange(date) {
this.setState({
dateToPost: date
});
}
handleChange(e) {
this.setState(
{
caption: e.target.value
}
)
}
render() {
function FieldGroup({ id, label, help, ...props }) {
return (
<FormGroup controlId={id}>
<ControlLabel>{label}</ControlLabel>
<FormControl {...props} />
</FormGroup>
);
}
return (
<Form onSubmit={this.handleFormSubmit.bind(this)}>
<h1> Create a SnapCapusle </h1>
{/* TODO Find out why FieldGroup component does not pass onChange function
correctly */}
<ControlLabel> Date </ControlLabel>
<DatePicker
selected={this.state.dateToPost}
onChange={this.handleDateChange}
style={ css }
showTimeSelect
dateFormat="LLL"
/>
<FormGroup id="1">
<ControlLabel> File </ControlLabel>
<FormControl
type="file"
label="Image"
name="image"
inputRef={ref => {
this.state.image = ref;
}}
/>
</FormGroup>
<FormGroup id="2">
<ControlLabel> Caption </ControlLabel>
<FormControl
type="text"
placeholder="Enter text"
name="caption"
onChange={this.handleChange}
/>
</FormGroup>
<FormGroup>
<Button type="submit"> Submit </Button>
</FormGroup>
</Form>
);
}
}
这是 PostCapsule 函数。
postCapsule(formData) {
console.log("PostCapsule called to " + `${this.domain}/snapcapsule/`)
return fetch(`${this.domain}/snapcapsule/`, {
method: 'POST',
credentials: 'same-origin',
body: formData
})
}
解决方案
推荐阅读
- java - java.lang.IllegalArgumentException:无法识别的类型:杰克逊中的 [null]
- sql - 如何从表中提取作为后续版本并且它们也有后续版本的软件版本列表?
- python - 如何在没有 django 的 post_detail 页面的情况下将“post id”(与评论模型连接的外键字段)获取到 django 评论表单
- kotlin - 构造函数是 Kotlin 中的函数吗?
- python - 在 `raise RuntimeError('Failed to open database') from exc 中使用 `from exc` 的目的是什么?
- android - 广告加载失败:0 使用测试广告时
- r - 将txt文件读入R时定义多列
- angularjs - 如何在 AngularJS 自定义指令中使用 ng-options 和 ng-model
- java - 有没有办法在不创建单独的子数据集的情况下对数据集进行分区并访问分区?
- slack - Slack:更新每天更改的相同图像 URL 以显示所有更改