Javascript 更新react js中的对象状态数组

我的组件中有以下代码片段，其中我根据状态中的对象生成输入字段

我可以成功生成输入字段，但收到错误消息：

TypeError:无法读取未定义的属性“map”

每当我在输入字段中键入时，指向

ArrayObjToArray

中的

Utils.js方法

如何更新此处的值

Main.js


从“./UI/Input”导入输入；
从“../../utility/Utils.js”导入{ArrayObjToArray}”；
const[profiles，setProfiles]=useState({
控制：[
{
网络：{
elementType:“输入”，
元素配置：{
键入：“文本”，
标签：“网络”，
},
价值：“推特”，
},
},
{
用户名：{
elementType:“输入”，
元素配置：{
键入：“文本”，
标签：“用户名”，
},
值：“@john”，
},
},
{
网址：{
elementType:“输入”，
元素配置：{
键入：“url”，
标签：“URL”，
},
值：“https://example.xyz",
},
},
],
});
const profiles controls=arrayObjToArray（profiles.controls）；
常量arrayInputHandler=（事件、索引、标识符）=>{
const list=[…profiles.controls]；
列表[索引][标识符]=event.target.value；
设置配置文件（列表）；
};
让profileField=ProfilesControl.map（（formElement）=>(
arrayInputHandler（事件，formElement.index，formElement.id）}
/>
));
如何在
arrayInputHandler
中更新profiles对象的问题。当您将列表传递给setProfiles时，它会将其结构从对象更改为数组

此外，您不得更改原始状态值。正确的更新方法如下所示

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
        });
    }));
  };

另外，你可以用简单的方式解决你的问题，比如

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

但是，这不是一种正确的方法，应该避免，因为react的许多重新呈现和其他优化都依赖于不变性
如何在
arrayInputHandler
中更新profiles对象的问题。当您将列表传递给setProfiles时，它会将其结构从对象更改为数组

此外，您不得更改原始状态值。正确的更新方法如下所示

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
        });
    }));
  };

另外，你可以用简单的方式解决你的问题，比如

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

但是，这不是一种正确的方法，应该避免，因为react的许多重新呈现和其他优化都依赖于不变性

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

点击这里你可以试试这个

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

检查这里
你能告诉我这是什么吗
arrayObjToArray
也重命名为
arrayObjToArray
，否则在地图检查控制台中的
ProfilesControl
结果之前，它会让您感到困惑，您能显示这是什么吗
arrayObjToArray
也重命名为
arrayObjToArray
，否则在地图检查控制台中的
ProfilesControl
的结果之前，它会让您感到困惑。请询问您的答案，但通过您的代码片段，我得到了
TypeError:无法读取未定义的属性“label”
错误我看不到正在使用的标签上面的代码片段。不管怎样，我已经更新了我的回答谢谢你的回答，但是通过你的代码片段，我得到了
TypeError:cannotread属性'label'of undefined
error我没有看到标签在上面的代码片段中被使用。无论如何，我已经更新了我的答案