IT技术 - 以特定方式保存数据 - 吾爱随笔录

以特定方式保存数据

IT技术 javascript reactjs

2021-05-21 03:46:48

我有一个应用程序，用户必须输入有关它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

1个回答

首先，您必须破坏（doc）与展开运算符（doc）相结合的表单值对象，以获得与汽车相关的值（我存储在变量中carValues）。之后，剩下要做的就是使用该变量进行操作，这里我结合使用Object.entries和Array.prototype.map

有一部分Number(key)，因为Object.entries()将对象转换为键值对数组，键的类型为字符串，因此您必须将其强制转换为Number第一个以获取基于 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))
}

用于实现的分叉代码和框

其它你可能感兴趣的问题

上一篇使用 ReactJS 自动选择跨度标签下一篇如何在我的 eventHandler 中访问 React 状态？