javascript - TypeError : Object(. ..) 不是函数 React S3

Question

目前，我希望添加一个表单，以便在我的数据库中创建记录并将图像上传到 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 之前，表单已全部设置好并可以正常工作，我已经按照文档进行操作，所以不确定我哪里出错了。

Answer 1

那里有一些错误。

第一个是你没有使用 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))

您应该将其包装在箭头函数中，以便在 promise 解析时执行。

尝试用这个替换它:

.then(() => uploadFile(this.state.images, this.s3Config))
.then(() => this.setState({ successMsg: true }), () => this.setState(initalState))