Question

我具有API生成的以下数据：

{
  "config": {
    1: {"slot1": "SK_DISENGAGE"},
    2: {"slot1": "SK_DISENGAGE"}
  }
}

我将config转换为下面的这个对象数组，因为通过react-hook-form显示它更容易处理，并且因为对象中的项目可能会发生变化：

{
  "config": [
    {"slot1": "SK_DISENGAGE", element: 1},
    {"slot1": "SK_DISENGAGE", element: 2}
  ]
}

Here's a codesandbox下面的代码：

function App() {
  const { register, control, handleSubmit, reset, watch } = useForm({
    defaultValues: {
      config: [
        { slot1: "SK_DISENGAGE", element: 1 },
        { slot1: "SK_DISENGAGE", element: 2 }
      ]
    }
  });
  // Simplified. The data comes from an API, and useForm would be empty until after the async functions are done.

  const { fields } = useFieldArray({ control, name: "config" });

  const onSubmit = (data) => console.log("data", data);

  renderCount++;

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <h1>Field Array </h1>
        {fields.map((item, index) => {
          return (
            <li key={item.id}>
              {`Item:`}
              <input
                name={`config.${item.element}.slot1`}
                defaultValue={`${item.slot1}`} 
                ref={register()}
              />
            </li>
          );
        })}
      </ul>
      <input type="submit" />
    </form>
  );
}

但是，我在将其转换回时遇到了麻烦，最终像这样：

{
  "config": [
    null,
    { "slot1": "SK_DISENGAGE" },
    { "slot1": "SK_DISENGAGE" }
  ]
}

config现在是对象数组，API不会接受这种格式。我尝试修改name标记中的input字段，在"上添加'，item.element或不加引号，但是结果是相同的

我假设第一个元素为null，因为没有任何内容将元素设置为0。

如何以编程方式将数字设置为对象键？是否有斜线或我应该放的东西，所以应将其视为字符串？

Answer 1

您可以使用Array.prototype.reduce()方法来获得所需的输出。数组的语法归约array.reduce(function(total, currentValue, currentIndex, arr), initialValue)。

const data = {
  config: [
    { slot1: 'SK_DISENGAGE', element: 1 },
    { slot1: 'SK_DISENGAGE', element: 2 },
  ],
};

const ret = {
  config: data.config.reduce((prev, c) => {
    const p = prev;
    p[c.element] = { slot1: c.slot1 };
    return p;
  }, {}),
};
console.log(ret);

Answer 2

如果您将字段映射更改为此：

{fields.map((item, index) => {
      return (
        <li key={item.id}>
          {`Item:`}
          <input
            name={item.element}
            defaultValue={`${item.slot1}`} // make sure to set up defaultValue
            ref={register()}
          />
        </li>
      );
    })}

还有您的onSubmit：

const onSubmit = (data) => {

    var newData = Object.entries(data).reduce( (acc, [key,value]) => {
      acc[key] = {slot1:value};
      return acc;
    },{});
    console.log("data", newData);
}

结果非常接近您的原始输入。...对您有用吗？

代码叉：https://codesandbox.io/s/react-hook-form-usefieldarray-forked-olcn3

Answer 3

在原始对象上附加一个array字段

{
  "config": {
    1: {"slot1": "SK_DISENGAGE"},
    2: {"slot1": "SK_DISENGAGE"}
  },
  "config-arr": [
    {"slot1": "SK_DISENGAGE", element: 1},
    {"slot1": "SK_DISENGAGE", element: 2}
  ]
}

Javascript：以编程方式将数字设置为对象键

3 个答案: