ReactJS：希望改進我的動態字段構建組件

Question

我對 React 功能組件比較陌生，我正在嘗試構建一個系統，該系統可以從一組對象中構建 forms。 到目前為止它有效，但我覺得我錯過了一些東西。 這是代碼：

import React, { useState } from 'react';
import "./DynamicForm.css";

function DynamicForm(props) {
    const [formFields, setFormFields] = useState([
        { name: "first_name", type: "text", value: "" },
        { name: "last_name", type: "text", value: "" },
        { name: "phone", type: "tel", value: "" },
        { name: "email", type: "email", value: "" },
        { name: "date_of_birth", type: "date", value: "" },
        { name: "language", type: "select", options: ['en', 'es'], value: "" },
    ])

    const handleChange = (index, value) => {
        let newFormFields = [...formFields];
        newFormFields[index].value = value;
        setFormFields(newFormFields);
    }

    const builtForm = (
        <div>
            {formFields.map((field, index) => {
                return (
                    <div class="col-md-3" index={index}>
                        <div class="form-group">
                            <label class="control-label">{field.name}</label>
                        <input placeholder="" type={field.type} class="form-control" value={field.value} onChange={(e) => handleChange(index, e.target.value)} />
                        </div>
                    </div>
                )
            })}
        </div>
    )

    return (
        <div>
            <section>
                {builtForm}
            </section>
        </div>);
}

export default DynamicForm;

注意：我將代碼切入核心以提高可讀性。

是不是有點太簡單了？ 每次我在一個生成的輸入中輸入一個新字符時，整個表單及其所有字段都會重新呈現，對嗎？ 我應該使用其他鈎子還是以其他方式設計它？

Answer 1

我不太確定在沒有整個組件更新的情況下像這樣動態創建組件，但這里有一些想法。

首先，在 JSX 中class應該是className 。 class已經是 JavaScript 中的關鍵字，因此我們使用className ，我相信這就是您在虛擬 dom 中實際編輯/創建的內容。

其次，為循環創建的組件提供 key prop。 這有助於所謂的和解。 幫助 react 識別哪些組件實際需要更新。 在您的情況下，您的字段都有一個唯一的name道具，因此您可以將 map 內的 div 更改為：

return (
    <div key={field.name} className='col-md-3' index={index}>
        ...
    </div>
);

永遠不要將循環的索引用於 key 。

接下來，對於這種方法，為了避免重新渲染所有內部組件，我想使用useMemo掛鈎來緩存元素。 問題是您將在循環中創建組件，這違反了“ 鈎子規則”。

最后，我的方法是為每個字段創建一個單獨的組件，而不是通過循環創建它們。 但是，我很想聽聽一些更有經驗的人如何解決這個問題以實現動態方法。