如何更新不会覆盖先前值的颜色字段？答案

【问题标题】：How can I update my color field where it will not overried the previous value?如何更新不会覆盖先前值的颜色字段？
【发布时间】：2022-08-06 21:05:05
【问题描述】：

我有这个数据，每次用户想要添加更多颜色时，它都会在color 字段中添加颜色。像这样的东西：color: [\"blue\",\"green\",\"yellow\"]或array。截至目前，如果我要添加更多颜色，它只会覆盖第一种颜色。

如何在不覆盖先前值的情况下更新字段 color？

index.js

import React from \"react\";
import { useForm } from \"react-hook-form\";
import FieldArray from \"./fieldArray\";
import ReactDOM from \"react-dom\";

import \"./styles.css\";
import { Button } from \"@mui/material\";

const defaultValues = {
  test: [
    {
      product: \"\",
      nestedArray: [{ size: \"\", color: \"\", design: \"\" }]
    }
  ]
};

function App() {
  const {
    control,
    register,
    handleSubmit,
    getValues,
    errors,
    reset,
    setValue
  } = useForm({
    defaultValues
  });
  const onSubmit = (data) => console.log(\"data\", data);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
      <h1>Array of Array Fields</h1>
      <p>
        The following example demonstrate the ability of building nested array
        fields.
      </p>

      <FieldArray
        {...{ control, register, defaultValues, getValues, setValue, errors }}
      />

      <button type=\"button\" onClick={() => reset(defaultValues)}>
        Reset
      </button>

      <Button type=\"submit\">Submit</Button>
      {/* <input type=\"submit\" /> */}
    </form>
  );
}

const rootElement = document.getElementById(\"root\");
ReactDOM.render(<App />, rootElement);

fieldArray.js

import React from \"react\";
import { useFieldArray } from \"react-hook-form\";
import NestedArray from \"./nestedFieldArray\";
import { InputLabel } from \"@mui/material\";
import Size from \"./Drop_drowns/Size\";

let renderCount = 0;

export default function Fields({ control, register, setValue, getValues }) {
  const { fields, append, remove, prepends } = useFieldArray({
    control,
    name: \"test\"
  });

  renderCount++;

  const productItems = [
    { label: \"Shirt1\", value: \"Shirt1\" },
    { label: \"Shirt2\", value: \"Shirt2\" },
    { label: \"Shirt3\", value: \"Shirt3\" },
    { label: \"Shirt4\", value: \"Shirt4\" }
  ];

  const menuItems = [
    { label: \"S\", value: \"S\" },
    { label: \"M\", value: \"M\" },
    { label: \"L\", value: \"L\" }
  ];

  return (
    <>
      <ul>
        {fields.map((item, index) => {
          return (
            <li key={item.id}>
              <label>Item {index + 1}</label>
              <InputLabel id=\"demo-simple-select-label\">Product</InputLabel>
              <Size
                name={`test[${index}].product`}
                menuItems={productItems}
                refer={register({ required: true })}
                defaultValue={item.product}
                control={control}
              />
              <InputLabel id=\"demo-simple-select-label\">Size</InputLabel>
              <Size
                name={`test[${index}].size`}
                menuItems={menuItems}
                refer={register({ required: true })}
                defaultValue={item.size}
                control={control}
              />
              <InputLabel id=\"demo-simple-select-label\">color</InputLabel>
              <Size
                name={`test[${index}].color`}
                menuItems={menuItems}
                refer={register({ required: true })}
                defaultValue={item.color}
                control={control}
              />
              <button type=\"button\" onClick={() => remove(index)}>
                Delete
              </button>
              <NestedArray nestIndex={index} {...{ control, register }} />
            </li>
          );
        })}
      </ul>

      <section>
        <button
          type=\"button\"
          onClick={() => {
            append({ name: \"append\" });
          }}
        >
          Add product
        </button>
      </section>

      <span className=\"counter\">Render Count: {renderCount}</span>
    </>
  );
}

嵌套字段数组

import React from \"react\";
import { useFieldArray } from \"react-hook-form\";
import Size from \"./Drop_drowns/Size\";
import { InputLabel } from \"@mui/material\";

//only changed here the name nestedArray to variations

export default ({ nestIndex, control, register }) => {
  const { fields, remove, append } = useFieldArray({
    control,
    name: `test[${nestIndex}].variantion`
  });

  const menuItems = [
    { label: \"S\", value: \"S\" },
    { label: \"M\", value: \"M\" },
    { label: \"L\", value: \"L\" }
  ];

  const colorItems = [
    { label: \"red\", value: \"red\" },
    { label: \"green\", value: \"green\" },
    { label: \"blue\", value: \"blue\" }
  ];

  return (
    <div>
      {fields.map((item, k) => {
        return (
          <div key={item.id} style={{ marginLeft: 20 }}>
            {/* <Size
              name={`test[${nestIndex}].variantion[${k}].size`}
              menuItems={menuItems}
              refer={register({ required: true })}
              defaultValue={item.size}
              control={control}
            /> */}
            <InputLabel id=\"demo-simple-select-label\">Color</InputLabel>

            <Size
              name={`test[${nestIndex}].color`}
              menuItems={colorItems}
              refer={register({ required: true })}
              defaultValue={item.color}
              control={control}
            />

            {/* <input
              name={`test[${nestIndex}].variantion[${k}].color`}
              ref={register({ required: true })}
              defaultValue={item.field}
              style={{ marginRight: \"25px\" }}
            /> */}

            <button type=\"button\" onClick={() => remove(k)}>
              Delete Colors
            </button>
          </div>
        );
      })}

      <button
        type=\"button\"
        onClick={() =>
          append({
            field1: \"field1\",
            field2: \"field2\"
          })
        }
      >
        Add Colors
      </button>

      <hr />
    </div>
  );
};

对于每个衬衫尺码，您可以选择多种颜色吗？那么多种颜色是否意味着多种衬衫？或者 1 件衬衫/尺码有多种颜色？

标签： javascript reactjs react-hook-form

【解决方案1】：

似乎您试图通过颜色实现的目标是提供一个或多个可供用户选择的选项。现在为每个添加一个字段的方式可能不是最好的方法。

一种更常见的方法是复选框，您可以在其中选择一个或多个。这是一个 blog post 在 React 中关于此的内容。虽然这讨论了收银机，但可以将添加数字值的概念应用于颜色值以形成所选值的数组。

如果您想继续使用字段，则当前代码中问题的根本原因是颜色的每个字段都映射到输出对象中的color，因此如果有多个，则最后一个获胜。有几种方法可以解决此问题：

引入一个新的依赖项，如React Advanced Form 的Field.Group 组件或类似react-fieldset 的东西，以修改color 以分组/嵌套它下面的字段
写你的own submit handleSubmit function 在那里你可以检索颜色字段并将其合并为一个
去掉单数color的概念，让它变成数字（例如color1、color2等）

【讨论】：

【解决方案2】：

在defaultValues 中将nestedArray 更改为映射，其中将颜色可行性声明为数组和类似的东西......

var defaultValues = {
  test: [
    {
      product: "",
      nestedArray: { size: ["S","M","L"], color: ["blue","green","yellow"], design: "" }
    }
  ]
};

一旦用户添加颜色，就在该颜色数组中添加新的颜色值。

【讨论】：

【解决方案3】：

如果要保存新值并且不覆盖旧值，请使用颜色作为列表并附加到它。将所有值保存到列表中。使用所有值或一个特定值。

const arr = [
  "blue"
];

//add new value
arr.push("red")

console.log("VALUES", arr);
console.log("FIRST ITEM", arr[0]);
console.log("LAST ITEM", arr[arr.length - 1])

【讨论】：