reactjs - 如何将从表单输入创建的多个对象添加到反应列表中

问题描述

我有一张表格，填写了一个高尔夫球场的 18 个洞，每个洞都有以下字段，hole, par, stroke, yards,courseid

在填写每个输入字段时，它会触发 onChange 并将表单状态中的变量的值设置为输入字段的值。

在我的表单对象中，我有所有这些字段，

const [form, setForm] = useState([
    {
        hole1: 1,
        par1: '',
        stroke1: '',
        yards1: ''
    },
    {
        hole2: 2,
        par2: '',
        stroke2: '',
        yards2: ''
    },
    {
        hole3: 3,
        par3: '',
        stroke3: '',
        yards3: ''
    },

   //repeated for 18 holes

完成并单击提交后，它会触发保存功能，将列表发送到后端（SpringBoot）以保存为dB。

由于有 18 个孔，我需要循环数据，以便我可以填写 18 个对象放入列表中以发送到后端。

我做了一个holes对象

   let[holes, setHoles] = useState({
        "hole": '',
        "par": '',
        "stroke": '',
        "yards": '',
        "course": {
            "courseid": ''
        }
    });

我现在想用数据中的值填充form。

所以我想将holes每个字段的值设置为，

form.hole1,
form.par1,
form.stroke1,
form.yards1

然后将该holes对象添加到列表中，然后再次运行循环并添加孔 2 的所有值等，直到完成所有 18 个孔。

当使用像这样的循环时，

for (let i= 1; i< 19; i++) {
            holes = {
                "hole": index,
                "par": form.par,
                "stroke": form.stroke,
                "yards": form.yards,
                "course": {
                    "courseid": 3
                }
            }
            const newList = list.concat({holes})
            list = newList;
        };

最好如何告诉它先进行form.par1第一个循环，然后再form.par2进行第二个循环等。

我觉得我需要在这里运行两个循环，以便它开始循环遍历所有数字 1-18，然后在移动到下一个数字之前循环遍历表单中的对象，

所以它从孔 1 开始，获取holes对象，从第一个form object, sets the 4 fields in 孔to those in the first形式对象（即 par1、yard1 等）获取值，然后将hole对象连接到list然后移动到数字 2 并继续直到所有 18 个都完成，但我我不知道我怎么能做到这一点。

标签： reactjslistloops

const list = form.map((hole, i) => { const num = i + 1; return { hole: num, par: hole[`par${num}`], stroke: hole[`stroke${num}`], yards: hole[`yards${num}`], course: { courseid: 3, }, }; });

reactjs - 如何将从表单输入创建的多个对象添加到反应列表中

问题描述

解决方案

推荐阅读