在ReactJs中保存时获取数据数组

Question

我在reactjs应用程序中有一个表单，我在其中渲染了一些单选按钮。

const items = [
  {
    id: 1,
    car: "BMW",
    colors: [
      {
        id: 1,
        text: "red"
      },
      {
        id: 2,
        text: "blue"
      }
    ]
  },
  {
    id: 2,
    car: "Audi",
    colors: [
      {
        id: 1,
        text: "green"
      },
      {
        id: 2,
        text: "white"
      }
    ]
  }
];
const Demo = () => {
  const onFinish = (values) => {
    console.log("Success:", values);
  };
  const onFinishFailed = (errorInfo) => {
    console.log("Failed:", errorInfo);
  };
  return (
    <Form
      {...layout}
      name="basic"
      initialValues={{
        remember: true
      }}
      onFinish={onFinish}
      onFinishFailed={onFinishFailed}
    >
      {items.map((i) => {
        return (
          <Form.Item
            label={i.car}
            key={i.car}
            name={"carId" + i.id}
            rules={[{ required: true, message: "Please" }]}
          >
            <Radio.Group>
              {i.colors.map((color) => {
                return (
                  <Radio key={color.text} value={color.text}>
                    {color.text}
                  </Radio>
                );
              })}
            </Radio.Group>
          </Form.Item>
        );
      })}
      <Form.Item {...tailLayout}>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

现在当我保存数据时，我得到:

{
carId1: "red",
carId2: "white"
}

问题:我想在以这种方式保存后获得数据:

[
  {
    carId: 1,
    colors: ["red"]
  },
  {
    carId: 2,
    colors: ["white"]
  }
]

问题:如何得到相同的结构，我上面描述保存表单后?

演示:https://codesandbox.io/s/basic-usage-antd4102-forked-o3to7?file=/index.js: 320 - 1730

Answer 1

我在注释中添加了一个链接，这里有一个简单的数据重构解决方案万一打不开，我刚刚更新了onFinish方法为:

const onFinish = (values) => {
    const results = [];
    items.forEach((carItem) => {
      results.push({
        carId: carItem.id,
        colors: [values["carId" + carItem.id]]
      });
    });
    console.log("Success:", results);
  };

这样你就有了所需的数据，并且可以按照你想要的形状来构造它。