Question

在 React js 中更新对象状态数组

2020-06-25

65

javascript reactjs

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

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

TypeError: Cannot read property 'map' of undefined

每当我在输入字段中输入时，都指向 Utils.js 中的方法 arrayObjToArrary 。

如何更新此处的值？

Main.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)}
    />
  ));

Utils.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

你可以试试这个

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

点击此处 codesandbox

Answer 2

如何在 arrayInputHandler 中更新配置文件对象的问题。当您将列表传递给 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 在其许多重新渲染和其他优化中很大程度上依赖于不变性