在循环中获取动态添加的输入值 nextjs

问：

我有一个动态生成的表单组件，我为用户提供了添加多个文本和文件输入的选项。动态添加工作正常，但在提交时我无法提取以下所有输入的值，这是我的 2 个文件的代码。

页面文件：

'use client'

import { useState } from 'react';
import { useRouter } from 'next/navigation';

import SemiForm from '@/components/SemiForm';
import Link from 'next/link';

const page = () => {
    const router = useRouter();
    const [submitting, setSubmitting] = useState(false);

    const [sPost, setSpost] = useState({
        spName: '',
    });

    const [selectedSpFile, setSelectedSpFile] = useState();

    const [semiForm, setSemiForm] = useState([<SemiForm key={0}
        sPost={sPost}
        setSpost={setSpost}
        setSelectedSpFile={setSelectedSpFile}
    />]);

    let handleAddSemiForm = (e) => {
        // e.preventDefault()
        setSemiForm([...semiForm, <SemiForm key={semiForm.length}
            sPost={sPost + semiForm.length}
            setSpost={setSpost + semiForm.length}
            setSelectedSpFile={setSelectedSpFile + semiForm.length}
        />]);
    }

    const createFinish = async (e) => {
        

        console.log(semiForm.length);

        for (let i = 0; i < semiForm.length; i++) {

        //Console Log all the values of the inputs 1 by 1
            
        }

        return
    }



    return (
        <section>

            <h4 className='text-white'>Add Semi Processed Item</h4>
            <div className="row">
                <div className="semiadd text-end">
                    <button type='button' disabled={submitting}
                        className="btn btn-info mb-3 btn-sm text-white"
                        onClick={handleAddSemiForm}
                    >
                        + Add New M Item
                    </button>
                </div>
                <div className="m-item-container border border-white pt-3">
                    {semiForm}

                </div>

                <div className="semiadd text-end">
                    <button type='button' disabled={submitting}
                        className="btn btn-info mt-3 btn-sm text-white"
                        onClick={handleAddSemiForm}
                    >
                        + Add New M Item
                    </button>
                </div>

            </div>
            
            <div className="row mt-3">
                    <div className="col-sm-12 col-md-12">
                        <div className="d-flex justify-content-center align-items-center gap-3">
                            
                            <button type='button' disabled={submitting}
                                className="btn btn-success mb-3 btn-lg"
                                onClick={() => createFinish()}
                            >
                                {submitting ? `Creating...` : 'Create'}
                            </button>
                            <Link onClick={() => router.back()} href='' className="btn btn-danger mb-3 btn-lg">Back</Link>
                        </div>
                    </div>
                </div>

        </section>
    )
}

export default page

样式文件：

import React from 'react'

const SemiForm = ({ sPost, setSpost, setSelectedSpFile }) => {
    return (


        <div className="m-item">
            <div className="col-sm-12 col-md-12">
                <div className="mb-3">
                    <label htmlFor="" className="text-white">Semi Processed Item Name <span className="text-danger">*</span></label>
                    <input
                        value={sPost.spName ?? ''}
                        onChange={(e) => setSpost({
                            ...sPost,
                            spName: e.target.value
                        })}
                        type="text"
                        className="form-control"
                        id=""
                        name=""
                        placeholder="Semi Processed Item Name"
                    />
                </div>
            </div>
            <div className="col-sm-12 col-md-12">
                <div className="mb-3">
                    <label htmlFor="" className="text-white">Semi Processed Item Image </label>
                    <input
                        onChange={(e) =>
                            setSelectedSpFile(e.target.files)

                        }
                        className="form-control" type="file" id="" name=""
                        capture="environment" accept="image/*"
                    />
                </div>
            </div>
        </div>

    )
}

export default SemiForm

帮助感谢。谢谢。