当前，我希望添加一个表单，可以在数据库中创建记录并将图像上传到S3，但是，我遇到了
TypeError: Object(...) is not a function
2 New.js:161
SyntaxError: JSON.parse: unexpected character at line 1 column 1 of the JSON data
这是我的代码
import React, { Component } from "react";
import { uploadFile } from "aws-s3";
const initalState = {
title: "",
description: "",
reference: "",
images: [],
price: "",
year: "",
category: "",
titleErr: "",
descriptionErr: "",
referenceErr: "",
imagesErr: "",
priceErr: "",
yearErr: "",
categoryErr: ""
};
class New extends Component {
constructor() {
super();
this.state = {
initalState,
categorys: [],
successMsg: false
};
this.s3Config = {
bucketName: "REMOVED",
dirName: "",
region: "eu-west-1",
accessKeyId: "REMOVED",
secretAccessKey: "REMOVED"
};
this.handleSubmit = this.handleSubmit.bind(this);
}
validate = () => {
let titleErr = "";
let descriptionErr = "";
let referenceErr = "";
let imagesErr = "";
let priceErr = "";
let yearErr = "";
let categoryErr = "";
// Title validation
if (!this.state.title) {
titleErr = "Please enter a title";
}
// Description error
if (!this.state.description) {
descriptionErr = "Please enter a description";
}
// Reference error
if (!this.state.reference) {
referenceErr = "Please enter a reference";
}
// Images validation
if (!this.state.images) {
imagesErr = "You must have at least one image";
}
// Price validation
if (!this.state.price) {
priceErr = "Please enter a price";
}
// Year validation
if (!this.state.year) {
yearErr = "Please enter a year";
}
// Category year
if (!this.state.category) {
categoryErr = "Please select a category";
}
if (
titleErr ||
descriptionErr ||
referenceErr ||
imagesErr ||
priceErr ||
yearErr ||
categoryErr
) {
this.setState({
titleErr,
descriptionErr,
referenceErr,
imagesErr,
priceErr,
yearErr,
categoryErr
});
return false;
}
return true;
};
onTitleChange(event) {
this.setState({ title: event.target.value });
}
onDescriptionChange(event) {
this.setState({ description: event.target.value });
}
onReferenceChange(event) {
this.setState({ reference: event.target.value });
}
onImagesChange(event) {
this.setState({ images: event.target.value });
}
onPriceChange(event) {
this.setState({ price: event.target.value });
}
onYearChange(event) {
this.setState({ year: event.target.value });
}
onCategoryChange(event) {
this.setState({ category: event.target.value });
}
componentDidMount() {
fetch("/api/category")
.then(res => res.json())
.then(categorys => this.setState({ categorys }))
.catch(function(error) {
console.log(error);
});
}
handleSubmit(event) {
event.preventDefault();
const isValid = this.validate();
const {
title,
description,
reference,
images,
price,
year,
category
} = this.state;
if (isValid) {
fetch("/api/collections/create", {
method: "POST",
body: JSON.stringify(
title,
description,
reference,
images,
price,
year,
category
),
headers: {
Accept: "application/json",
"Content-Type": "application/json"
}
})
.then(res => res.json())
.then(uploadFile(this.state.images, this.s3Config))
.then(this.setState({ successMsg: true }), this.setState(initalState))
.catch(error => {
console.log(error);
});
}
}
render() {
const {
title,
description,
reference,
images,
price,
year,
category
} = this.state;
return (
<>
<div className='p-12 w-full text-center text-gray-800'>
<h1 className='title mb-10'>Create a collection item</h1>
{this.state.successMsg && (
<div
className='w-full m-auto max-w-lg mb-10 bg-green-100 border border-green-400 text-green-700 px-4 py-3 rounded relative'
role='alert'
>
<strong className='font-bold'>Holy smokes! </strong>
<span className='block sm:inline'>
You have just added a new collection item.
</span>
</div>
)}
<form className='w-full m-auto max-w-lg'>
<div className='flex flex-wrap -mx-3 mb-6'>
<div className='w-full md:w-1/2 px-3 mb-6 md:mb-0'>
<label htmlFor='title'>Title</label>
<input
id='title'
type='text'
placeholder='Enter a title here'
value={title || ""}
onChange={this.onTitleChange.bind(this)}
/>
<p className='my-2 text-red-500 text-xs'>
{this.state.titleErr}
</p>
</div>
<div className='w-full md:w-1/2 px-3'>
<label htmlFor='reference'>Reference</label>
<input
id='reference'
type='text'
placeholder='Enter a year here'
value={reference || ""}
onChange={this.onReferenceChange.bind(this)}
/>
<p className='my-2 text-red-500 text-xs'>
{this.state.referenceErr}
</p>
</div>
</div>
<div className='flex flex-wrap -mx-3 mb-6'>
<div className='w-full md:w-1/2 px-3 mb-6 md:mb-0'>
<label htmlFor='year'>Year</label>
<input
id='year'
type='number'
placeholder='Enter a year here'
value={year || ""}
onChange={this.onYearChange.bind(this)}
/>
<p className='my-2 text-red-500 text-xs'>
{this.state.yearErr}
</p>
</div>
<div className='w-full md:w-1/2 px-3 mb-6 md:mb-0'>
<label htmlFor='category'>Category</label>
<div className='relative'>
<select
id='category'
value={category || ""}
onChange={this.onCategoryChange.bind(this)}
>
<option>N/A</option>
{this.state.categorys.map(category => (
<option key={category._id} value={category.name}>
{category.name}
</option>
))}
</select>
<div className='pointer-events-none absolute inset-y-0 right-0 flex items-center px-2'>
<svg
className='fill-current h-4 w-4'
xmlns='http://www.w3.org/2000/svg'
viewBox='0 0 20 20'
>
<path d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z' />
</svg>
</div>
<p className='my-2 text-red-500 text-xs'>
{this.state.categoryErr}
</p>
</div>
</div>
</div>
<div className='flex flex-wrap -mx-3 mb-6'>
<div className='w-full md:w-1/2 px-3 mb-6 md:mb-0'>
<label htmlFor='price'>Price</label>
<input
id='price'
type='number'
placeholder='Enter a price here'
value={price || ""}
onChange={this.onPriceChange.bind(this)}
/>
<p className='my-2 text-red-500 text-xs'>
{this.state.priceErr}
</p>
</div>
<div className='w-full md:w-1/2 px-3'>
<label htmlFor='reference'>Images (Multiple allowed)</label>
<input
id='reference'
type='file'
value={images || ""}
onChange={this.onImagesChange.bind(this)}
/>
<p className='my-2 text-red-500 text-xs'>
{this.state.imagesErr}
</p>
</div>
</div>
<div className='flex flex-wrap -mx-3'>
<div className='w-full px-3'>
<label htmlFor='description'>Description</label>
<textarea
id='description'
type='text'
placeholder='Enter a description here'
value={description || ""}
onChange={this.onDescriptionChange.bind(this)}
/>
<p className='my-2 text-red-500 text-xs'>
{this.state.descriptionErr}
</p>
</div>
</div>
<div className='flex'>
<button
className='btn'
type='button'
onClick={this.handleSubmit.bind(this)}
>
Send
</button>
</div>
</form>
</div>
</>
);
}
}
export default New;
提交时出现400错误。在添加s3之前，所有表单都已设置并且可以正常工作，我一直关注文档，因此不确定我哪里出错了。
答案 0 :(得分：2)
您那里有一些错误。
第一个是您没有正确使用JSON.stringify。 您的代码：
JSON.stringify(
title,
description,
reference,
images,
price,
year,
category
)
您应该有1个参数，这是您要进行字符串化的对象。
将其更改为此：
JSON.stringify({
title,
description,
reference,
images,
price,
year,
category
})
第二个是您没有正确使用promise.then方法。
在您的代码中，您正在立即执行uploadFile和setState，而不是在promise解决时执行。您的代码：
.then(uploadFile(this.state.images, this.s3Config))
.then(this.setState({ successMsg: true }), this.setState(initalState))
您应将其包装在箭头函数中，以在承诺解决后执行。
尝试将其替换为此：
.then(() => uploadFile(this.state.images, this.s3Config))
.then(() => this.setState({ successMsg: true }), () => this.setState(initalState))