在反應js中更新object state的數組

Question

我的組件中有以下代碼片段，其中我根據 state 中的對象生成輸入字段。

我可以成功生成輸入字段，但收到錯誤消息：

TypeError：無法讀取未定義的屬性“地圖”

每當我在輸入字段中鍵入時，都指向Utils.js中的方法arrayObjToArrary 。

如何更新這里的值？

主.js

 import Input from "../UI/Input"; import {arrayObjToArrary} from "../../utility/Utils.js"; 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.xyz", }, }, ], }); const profilesControls = arrayObjToArrary(profiles.controls); const arrayInputHandler = (event, index, identifier) => { const list = [...profiles.controls]; list[index][identifier] = event.target.value; setProfiles(list); }; 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)} /> ));

實用程序.js

 export const arrayObjToArrary = (controls) => { const formElementsArray = controls.map((item,index) =>({ id: Object.keys(item)[0], index:index, config: item[Object.keys(item)[0]], })) return formElementsArray; }

Answer 1

如何在arrayInputHandler中更新配置文件 object 的問題。 當您將列表傳遞給 setProfiles 時，它會將其結構從 object 更改為數組。

此外，您不得更改原始 state 值。 正確的更新方式如下

const arrayInputHandler = (event, index, identifier) => {
    const value = event.target.value;
    setProfiles(prev => ({
        ...prev,
        controls: profiles.controls.map((controls, i) => {
           if(i === index) {
              return {
                ...controls, [identifier]: {
                  ...controls[identifier],
                  value
               }
              }
           }
           return controls
        });
    }));
  };

PS你總是可以用簡單的方式解決你的問題，比如

const arrayInputHandler = (event, index, identifier) => {
    const list = [...profiles.controls];
    list[index][identifier] = event.target.value;
    setProfiles({profile:list});
  };

然而，這不是一個正確的方法，應該避免，因為 React 很大程度上依賴於不變性來進行許多重新渲染和其他優化

Answer 2

你可以試試這個

const arrayInputHandler = (event, index, identifier) => {
    const list = [...profiles.controls];
    list[index][identifier].value = event.target.value;
    setProfiles({ controls: list });
};

在這里檢查代碼和框