React表单内随下拉选项渲染的AuxiliaryForm组件无报错不渲染如何解决？

问题原因 #

1. AuxiliaryForm 组件的map遍历未返回JSX元素
   你在AuxiliaryForm中书写的content.inputs.map回调使用大括号包裹逻辑，但未添加return语句返回DOM结构，遍历后得到的是全为undefined的数组，自然没有内容渲染。
2. selectedOption初始值类型不匹配
   声明selectedOption时初始值为数组[{ option: "" }]，但下拉选择后存储的是字符串类型的选项值，类型不统一会导致条件判断出现预期外的问题。

修复方案 #

1. 修正AuxiliaryForm的map返回逻辑 #

两种修改方式二选一即可：

• 去掉大括号直接返回DOM：

return (
    <>
        {content.inputs.map((input, key) => (
            <div key={key} className="createContainer" id="Furniture">
                <div className="labelConatainer">
                    <label className="p-b2">{input.label}</label>
                </div>
                <div className="inputContainer">
                    <input
                        className="m-b2"
                        type="text"
                        name={input.name}
                        placeholder="10"
                        {...register(input.name, {
                            required: true,
                        })}
                    />
                    <h3 className="error-msg">
                        {errors[input.name]?.message}
                    </h3>
                </div>
                <div className="formDescription">
                    <h4>{infoMessage}</h4>
                </div>
            </div>
        ))}
    </>
)

• 保留大括号，添加return语句：

return (
    <>
        {content.inputs.map((input, key) => {
            console.log(input);
            return (
                <div key={key} className="createContainer" id="Furniture">
                    {/* 内部DOM结构保持不变 */}
                </div>
            )
        })}
    </>
)

2. 修正selectedOption的初始值 #

将主组件中selectedOption的初始值改为空字符串：

const [selectedOption, setSelectedOption] = useState("");

可选优化 #

主组件中判断显示AuxiliaryForm的三重三元判断可以简化为：

<div>
    {["Furniture", "Book", "DVD Disc"].includes(selectedOption) && <AuxiliaryForm product={selectedOption} />}
</div>

额外注意 #

你当前主组件的表单提交事件绑定错误：onSubmit={handleSubmit(handleSelectChange)}把下拉变更处理函数当成了提交回调，建议单独编写表单提交的逻辑函数传入，避免提交时逻辑异常。

内容的提问来源于stack exchange，提问作者Aleksandrs Barbins