在表單 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 })); };