javascript - 如何修复此错误 TypeError: Converting circular structure to JSON --> 从带有构造函数 'Window' 的对象开始

Question

当我将数据发送到后端时遇到了这个问题，这意味着我从用户那里收集名称、描述、价格和类别。它工作正常，但用户单击付费选项的下拉菜单并选择其上的任何选项出现此错误，请查看我的代码。

import { useState, useEffect } from "react";
import axios from "axios";
import InstructorRoute from "../../../components/routes/InstructorRoute";
import { Button, ButtonGroup, IconButton } from "@material-ui/core";
import CourseCreateForm from "../../../components/forms/CourseCreateForm";
import Resizer from "react-image-file-resizer";
import { toast } from "react-toastify";
import { useRouter } from "next/router";

// const { Option } = Select;

const createCourse = () => {

  const router = useRouter();
  // state
  const [values, setValues] = useState({
    name: "",
    description: "",
    price: "",
    uploading: false,
    paid: true,
    loading: false,
  });

  const [image, setImage] = useState({});
  const [preview, setPreview] = useState("");
  const [uploadButtonText, setUploadButtonText] = useState("Upload Image");;

  const handleChange = (e) => {
    setValues({ ...values, [e.target.name]: e.target.value });
  };

  const handleImage = (e) => {
    let file = e.target.files[0];
    setPreview(window.URL.createObjectURL(file));
    setUploadButtonText(file.name);
    setValues({ ...values, loading: true });

    // resize
    Resizer.imageFileResizer(file, 720, 500, "JPEG", 100, 0, async (uri) => {
      try {
        let { data } = await axios.post("/api/course/upload-image", {
          image: uri,
        });
        console.log("IMAGE UPLOADED", data);
        // set image in the state
        setImage(data);
        setValues({ ...values, loading: false });
      } catch (err) {
        console.log(err);
        setValues({ ...values, loading: false });
        toast("Image upload failed. Try later.");
      }
    });
  };

  const handleImageRemove = async () => {
    try {
      // console.log(values);
      setValues({ ...values, loading: true });
      const res = await axios.post("/api/course/remove-image", { image });
      setImage({});
      setPreview("");
      setUploadButtonText("Upload Image");
      setValues({ ...values, loading: false });
    } catch (err) {
      console.log(err);
      setValues({ ...values, loading: false });
      toast("Image upload failed. Try later.");
    }
  };

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      console.log(values);
      const { data } = await axios.post("/api/course", {
        ...values,
        image,
      });
      toast.success("Great! Now you can start adding lessons");
      router.push("/creator");
    } catch (err) {
      toast.error(err.response.data);
    }
  };

  return (
    <InstructorRoute>
      <h1 className=" text-center square">Create Course</h1>
      <div className="pt-3 pb-3">
        <CourseCreateForm
          handleSubmit={handleSubmit}
          handleImage={handleImage}
          handleChange={handleChange}
          values={values}
          setValues={setValues}
          preview={preview}
          uploadButtonText={uploadButtonText}
          handleImageRemove={handleImageRemove}
        />
      </div>
      <pre style={{color:"white"}}>{JSON.stringify(values, null, 4)}</pre>
    </InstructorRoute>
  );
};

export default createCourse;

我通过道具 createCourse 将数据发送到 CourseCreateForm

import { Button, ButtonGroup, IconButton, Badge } from "@material-ui/core";
import Select from '@material-ui/core/Select';
import MenuItem from '@material-ui/core/MenuItem';
import Avatar from '@material-ui/core/Avatar';

// const { Option } = Select;

const CourseCreateForm = ({
    handleSubmit,
    handleImage,
    handleChange,
    values,
    setValues,
    preview,
    uploadButtonText,
    handleImageRemove,
}) => {
    // const children = [];
    // for (let i = 9.99; i <= 100.99; i++) {
    //     children.push(<Select key={i.toFixed(2)}>${i.toFixed(2)}</Select>);
    // }
    return (
        <>

            <form onSubmit={handleSubmit} className="container" style={{
                padding: "30px",
                color: "#fff",
                // margin: "-54px 23px",
                backgroundColor: "rgba(255,255,255,0.06)",
                border: "1px solid rgba(255,255,255,0.1)",
                width: "100%",
                borderRadius: "15px",
                // padding: "32px",
                backdropFilter: "blur(10px)",
                // position: "absolute",
                // right: "0px",
                // width: "300px",
                /* border: 3px solid #73AD21; */
                // padding: "10px",
            }}>
                <div className="form-group">
                    <input
                        type="text"
                        name="name"
                        className="form-control"
                        placeholder="Name"
                        value={values.name}
                        onChange={handleChange}
                    />
                </div>

                <div className="form-group">
                    <textarea
                        name="description"
                        cols="7"
                        rows="7"
                        value={values.description}
                        className="form-control"
                        onChange={handleChange}
                    ></textarea>
                </div>

                <div className="form-row">
                    <div className="col">
                        <div className="form-group">
                            <Select
                                color="secondary"
                                style={{ width: "100%", color: "white" }}
                                // size="large"
                                value={values.paid}
                                onChange={(v) => setValues({ ...values, paid: !values.paid })}
                            >

                                <MenuItem value={true}>Paid</MenuItem>
                                <MenuItem value={false}>Free</MenuItem>
                            </Select>
                        </div>
                    </div>
                    {values.paid && (
                        <div className="form-group">
                            <Select
                                defaultValue="$9.99"
                                style={{ width: "100%" }}
                                onChange={(v) => setValues({ ...values, price: v })}
                                // tokenSeparators={[,]}
                                size="large"

                            >

                                <MenuItem >100</MenuItem>
                                <MenuItem >200</MenuItem>


                            </Select>


                            {/* <input
                                type="number"
                                name="Price"
                                className="form-control"
                                placeholder="Enter Price"
                                onChange={(v) => setValues({ ...values, price:v })}
                            /> */}


                        </div>
                    )}
                </div>

                <div className="form-group">
                    <input
                        type="text"
                        name="category"
                        className="form-control"
                        placeholder="Category"
                        value={values.category}
                        onChange={handleChange}
                    />
                </div>


                <div className="form-row">
                    <div className="col">
                        <div className="form-group">
                            <label className="btn btn-outline-secondary btn-block text-left">
                                {uploadButtonText}
                                <input
                                    type="file"
                                    name="image"
                                    onChange={handleImage}
                                    accept="image/*"
                                    hidden
                                />
                            </label>
                        </div>
                    </div>
                    {preview && (
                        <Badge badgeContent={"X"} onClick={handleImageRemove} style={{ cursor: "pointer" }} color="error">
                            <Avatar width={200} src={preview} />
                        </Badge>
                    )}

                </div>

                <div className="row">
                    <div className="col">
                        <Button
                            onClick={handleSubmit}
                            disabled={values.loading || values.uploading}
                            loading={values.loading}
                            size="large"
                            shape="round"
                            color="secondary"
                            variant="contained"
                        >
                            {values.loading ? "Saving..." : "Save & Continue"}
                        </Button>
                    </div>
                </div>
            </form>
        </>
    );

};

export default CourseCreateForm;

这是代码的输出，我用红色标记指定了下拉菜单。

这个错误实际上来了。

标签： javascriptreactjsnext.js