理解帮助函数来存储动态状态的对象数据答案

【问题标题】：understanding helper function to store object data for dynamic state理解帮助函数来存储动态状态的对象数据
【发布时间】：2020-10-21 20:19:09
【问题描述】：

就说我的状态是重复的吧：

state = {
customer: {
  name: {
    elementType: "input",
    elementConfig: {
      type: "text",
      placeholder: "Your Name"
    },
    value: ""
  },
  street: {
    elementType: "input",
    elementConfig: {
      type: "text",
      placeholder: "Street"
    },
    value: ""
  },

我想将对象数据存储到一个辅助函数中，这样我就可以添加邮政编码、国家等等，而不会让我的状态变得混乱。你的辅助函数会像这样吗？我无法弄清楚如何编写这样的函数

 const helperFunction = function({elementType, ElementConfig, type, placeholder, value}){
    setState({elementType: 'some value', ElementConfig: {type: "", placeholder: ""}})
 }

so I can call state = {
    name: helperFunction()
}

我想我真的不知道怎么写，但我想展示我的思考过程。我相信它比这更容易。我只是编码新手。如果有人可以帮助我或将我链接到一篇很棒的文章。谢谢。

【问题讨论】：

对于像name: helperFunction() 这样的调用，该函数需要返回一个对象，而不是调用 setState。另外，你可能会打电话给helperFunction("input", "text", "country")，对吧？这里的最终目标是什么？您是否正在尝试构建表单？
@ChrisG 是的，我正在尝试构建一个包含名称、街道、邮政编码、国家/地区的表单，并使用 switch 语句检查输入类型，然后呈现正确的 HTML 元素。但更好奇的是如何制作一个保存对象数据的辅助函数以及如何动态定位数据

标签： javascript reactjs forms object

【解决方案1】：

如果我理解您的问题以及您想要的行为，那么我认为您可以使用具有您想要的形状和“默认”值并复制的 reference 对象，或者创建实用程序函数这会做同样的事情，但允许一些“可配置性”。如果您在构造函数或正文中设置初始状态，则不能调用this.setState。

const referenceObject = {
  elementType: "input",
  elementConfig: {
    type: "text",
    placeholder: "",
  },
  value: "",
};

那么当你声明状态时浅拷贝引用对象

state = {
  name: { ...referenceObject },
};

如果您正在寻找一种实用函数来执行此操作并设置一些值，那么一个示例可能就是这样。

const helperFunction = ({ elementConfig, ...config }) => ({
  ...referenceObject,
  ...config,
  elementConfig: {
    ...referenceObject.elementConfig,
    ...elementConfig,
  }
});

你的想法是你浅复制每个嵌套级别并应用覆盖/新值。

用你想要覆盖的初始化状态

state = {
  name: helperFunction({
    elementConfig: { placeholder: 'Placeholder' },
  }),
};

const referenceObject = {
  elementType: "input",
  elementConfig: {
    type: "text",
    placeholder: "",
  },
  value: "",
};

const helperFunction = ({
  elementConfig,
  ...config
}) => ({
  ...referenceObject,
  ...config,
  elementConfig: {
    ...referenceObject.elementConfig,
    ...elementConfig,
  }
});

const state1 = {
  name: { ...referenceObject
  },
};
console.log(state1);

const state2 = {
  name: helperFunction({
    elementConfig: {
      placeholder: 'My Custom Placeholder'
    }
  }),
};
console.log(state2);

【讨论】：