在表单 object 中单击反应 js 时添加输入字段

Question

我的 react 应用程序中有以下代码段来为我的表单生成输入字段：

 const [profiles, setProfiles] = useState({ controls: [ { network: { elementType: "input", elementConfig: { type: "text", label: "Network", }, value: "Twitter", }, }, { username: { elementType: "input", elementConfig: { type: "text", label: "Username", }, value: "@john", }, }, { url: { elementType: "input", elementConfig: { type: "url", label: "URL", }, value: "https://example.co", }, }, ], });

生成输入字段的代码片段：

 const profilesControls = (controls) => { const formElementsArray = controls.map((item,index) =>({ id: Object.keys(item)[0], index:index, config: item[Object.keys(item)[0]], })) return formElementsArray; } let profileField = profilesControls.map((formElement) => ( <Input label={formElement.config.elementConfig.label} key={formElement.index} type={formElement.config.elementType} elementConfig={formElement.config.elementConfig} value={formElement.config.value} changed={(event) => arrayInputHandler(event, formElement.index, formElement.id) } /> ));

并且一个按钮和function附加到按钮上添加另一组[network, username, url]

 const handelAddField = () => { const fields = [...profiles.controls]; fields.map((item, i) => { setProfiles({...profiles, controls: [...profiles.controls, item]}) }); console.log(profiles.controls); };

使用handelAddField ，我可以看到 object 被推入了 state 的控件数组中，但输入字段未在表单中生成。

更新

现在只生成一个输入字段，即 URL

Answer 1

您应该全部设置配置文件以更新setProfiles 。

而不是profiles.controls.push(item)使用：

setProfiles({...profiles, controls: [...profiles.controls, item]})

Answer 2

找到了我自己的解决方案：

 const handelAddField = () => { const fields = [...profiles.controls]; fields.map((item, i) => { fields.push(item); }); setProfiles((prev) => ({...prev, controls:fields })); };