javascript - 以特定方式保存数据

Question

我有一个应用程序，用户必须输入有关它的数据，保存后form，数据应该以某种形式输出。

const ParrentForm = () => {
  const [carNr, setCarNr] = useState([]);

  const onFinish = (values) => {
    const { firstName, lastName } = values;
    const user = {
      firstName,
      lastName,
      things: {
        cars: []
      }
    };
    console.log(user);
  };

  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  const setFloorsNrHandler = (nr) => {
    setCarNr(Array.from({ length: nr }, (v, k) => k));
  };

  return (
    <div>
      <Form
        name="main"
        initialValues={{ remember: true }}
        onFinish={onFinish}
        onFinishFailed={onFinishFailed}
      >
        <Form.Item
          label="First Name"
          name="firstName"
          rules={[{ required: true, message: "Please input your first name!" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          label="Last Name"
          name="lastName"
          rules={[{ required: true, message: "Please input your last name!" }]}
        >
          <Input />
        </Form.Item>
        <Form.Item
          name="nrOfCars"
          label="Cars"
          rules={[{ type: "number", min: 0, max: 15 }]}
        >
          <InputNumber onChange={setFloorsNrHandler} />
        </Form.Item>
        {carNr.map((f, k) => {
          return (
            <Form.Item key={k}>
              <InnerForm cKey={k} />
            </Form.Item>
          );
        })}
        <Form.Item>
          <Button type="primary" htmlType="submit">
            Submit
          </Button>
        </Form.Item>
      </Form>
    </div>
  );
};

export default ParrentForm;

预期数据应如下所示：

{
  "user": {
    "firstName": "Bill",
    "lastName": "M.",
  },
  "things": {
    "cars": [
      {
        "nr":  1,
        "carsList": [
          {
            "name": "Car 1",
            "nr": 1
          },
            {
            "name": "Audi",
            "nr": 2
          },
          ,
            {
            "name": "Mercedes",
            "nr": 3
          }
        ]
      },
      {
        "nr":  2,
        "carsList": [
          {
            "name": "Bmw",
            "nr": 1  
          }
        ]
      }
    ]
  }
}

如何修改onFinish函数内部的数据以获得上述结果？
演示：https ://codesandbox.io/s/modest-cache-o0g65?file=/OuterForm.js:136-1755

标签： javascriptreactjs

Answer 1

首先，您必须结合展开运算符 ( doc ) 破坏 ( doc ) 表单值对象以获取与汽车相关的值（我存储在 variable 中）。在那之后，唯一剩下要做的就是操作那个变量，这里我结合使用和carValuesObject.entriesArray.prototype.map

有一部分Number(key)，因为Object.entries()将对象转换为键值对数组，键的类型为字符串，因此您必须将其转换为Numberfirst 以用于基于 1 的索引

const onFinish = values => {
  const { firstName, lastName, nrOfCars, ...carValues } = values
  const cars = Object.entries(carValues).map(([key, value]) => ({
    nr: Number(key) + 1,
    carsList: (value.cars || []).map((car, carIndex) => ({
      nr: carIndex + 1,
      name: car.name
    }))
  }))
  const user = {
    firstName,
    lastName,
    things: {
      cars
    }
  }
  console.log(JSON.stringify(user, null, 2))
}

用于实现的分叉代码和框