以动态形式动态添加文件

Question

在此代码中，我想动态添加工期定价字段以及整个计划。我已经实施了整个计划，但是在动态添加工期定价时却遇到了错误

import React, {
  Component,
  useState
} from "react";
// import DurationPrice from "./DurationandPrice";
// import Rules from "./Rules";

const TOKEN = "hello";
export function Step2() {
  const [inputList, setInputList] = useState([{
    planName: "",
    description: "",
    cuisine: "",
    durationPricings: [{
      duration: "",
      maximumDuration: "",
      price: "",
    }, ],
  }, ]);

  const handleChnage = (e, index) => {
    const {
      name,
      value
    } = e.target;
    const list = [...inputList];
    list[index][name] = value;
    setInputList(list);
  };
  const handlePlanInput = () => {
    const list = [...inputList];
    list.push({
      planName: "",
      description: "",
      cuisine: "",
      durationPricings: [{
        duration: "",
        maximumDuration: "",
        price: ""
      }],
    });
    setInputList(list);
    // setInputList([...inputList,{firstName:'',lastName:''}]);
  };
  const handlePlanRemove = (index) => {
    const list = [...inputList];
    list.splice(index, 1);
    setInputList(list);
  };
  const handleSubmit = (e) => {
    e.preventDefault();
  };
  const handleSave = (e) => {
    e.preventDefault();
    console.log("button clicked");
    fetch(`https://cosynest-api.herokuapp.com/api/plans/create`, {
        method: "POST",
        body: JSON.stringify({
          duration: inputList.duration,
          maximumDuration: inputList.maximumDuration,
          price: inputList.price,
        }),
        headers: new Headers({
          Authorization: `Bearer ${TOKEN}`,
          "content-type": "application/json",
        }),
      })
      .then((response) => response.json())
      .then(console.log(inputList))
      .then(localStorage.setItem("Token-CreateShop", TOKEN))
      .catch(console.log("error"));
  };

  // debugger;
  return ( <
    div className = "plan-form" > {
      inputList.map((item, i) => {
        return ( <
          form key = {
            i
          }
          onSubmit = {
            handleSubmit
          } >
          <
          input type = "text"
          name = "planName"
          className = "mr-10 input "
          placeholder = "Plan Name"
          value = {
            item.planName
          }
          onChange = {
            (e) => handleChnage(e, i)
          }
          /> <
          input type = "text"
          name = "description"
          className = "mr-10 input "
          placeholder = "Description"
          value = {
            item.description
          }
          onChange = {
            (e) => handleChnage(e, i)
          }
          /> <
          input type = "cuisine"
          onChange = {
            (e) => handleChnage(e, i)
          }
          value = {
            item.cuisine
          }
          className = "mr-10 input "
          name = "cuisine"
          placeholder = "Cuisine" /
          >

          <
          h2 > Duration and Price < /h2> { /* <Durationprice /> */ } <
          br / >
          <
          div > {
            inputList.length - 1 === i && ( <
              button type = "button"
              onClick = {
                handlePlanInput
              }
              className = "mr-10 btn"
              value = "Add Plan" >
              Add Plan <
              /button>
            )
          } {
            inputList.length !== 1 && ( <
              button onClick = {
                () => handlePlanRemove(i)
              }
              className = "mr-10 btn-red"
              value = "Remove Plan" >
              Remove <
              /button>
            )
          } <
          /div> <
          /form>
        );
      })
    } <
    button onClick = {
      handleSave
    }
    className = "btn-pink btn "
    type = "submit" >
    Save PLANS <
    /button> <
    pre > {
      JSON.stringify(inputList, null, 3)
    } < /pre> <
    /div>
  );
}

export default Step2;