使用 Formik.js 时如何在对象中创建嵌套数组？

Question

我想在设施中创建一个嵌套板。像这样：

我想知道是否可以转换所有内容以便从数组创建对象除非有人知道更好的方法或想法？ JSON 示例：

{
    "userId": "4",
    "offers":[
    {

        "mallCodename": "gallery",
        "shopCodename":"borubar",
        "productCodename": "green_socks",
        "discount": 30,
        "ttl": 3600
    },
    {
        "mallCodename": "gallery",
        "shopCodename":"nike",
        "productCodename": "sport_shoes",
        "discount": 30,
        "ttl": 222
    }
    ]
}

这是我的组件：

export default function Form(props) {
  const [values, setInputValue] = useState([]);
  const dispatch = useDispatch();


  function onChange(e) {
    e.preventDefault();
    const { name, value, type } = e.target;

    setInputValue({ ...values, [name]: value});
  }

  function onSubmit(e) {
    e.preventDefault();

    dispatch(sendOffer([values]));
    setInputValue([]);
  }

  return (
    <div id="accordion" role="tablist">
      <div className="card">
        <div className="card-header" role="tab" id="headingOne">
          <h5 className="mb-0">
            <a
              data-toggle="collapse"
              href="#collapseOne"
              aria-expanded="true"
              aria-controls="collapseOne"
            >
              Rozwin
            </a>
          </h5>
        </div>

        <div
          id="collapseOne"
          className="collapse show"
          role="tabpanel"
          aria-labelledby="headingOne"
        >
          <form onSubmit={onSubmit}>
            <table className="table table-responsive">
              <tbody className="tbody-form-promo">
                <tr className="tr-table-form-promo">
                  <td>Uzytkownik:</td>
                  <td>Nazwa produktu</td>
                  <td>Galleria</td>
                  <td>Nazwa sklepu</td>
                  <td>Znizka</td>
                  <td>Czas oferty</td>
                </tr>
                <tr className="tr-table-form-promo">
                  <td>{(values.userId = props.userId)}</td>
                  <td>
                    <input
                      className="text-place-post-form"
                      name="productCodename"
                      type="text"
                      placeholder="Nazwa produktu"
                      value={values.productCodename || ""}
                      onChange={onChange}
                      required
                    />
                  </td>
                  <td>
                    <input
                      className="text-place-post-form"
                      name="mallCodename"
                      type="text"
                      placeholder="Galeria"
                      value={values.mallCodename || ""}
                      onChange={onChange}
                      required
                    />
                  </td>
                  <td>
                    <input
                      className="text-place-post-form"
                      name="shopCodename"
                      type="text"
                      placeholder="Nazwa sklepu"
                      value={values.shopCodename || ""}
                      onChange={onChange}
                      required
                    />
                  </td>
                  <td>
                    <input
                      className="text-place-post-form"
                      name="discount"
                      type="number"
                      placeholder="max 100%"
                      value={values.discount || ""}
                      onChange={onChange}
                      onInput={inputMaxLength}
                      maxLength="3"
                      max={100}
                      min={0}
                      step={1}
                      required
                    />
                  </td>
                  <td>
                    <input
                      className="text-place-post-form"
                      type="number"
                      name="ttl"
                      placeholder="Max 180 minut"
                      value={values.ttl || ""}
                      max={180}
                      min={0}
                      step={1}
                      onChange={onChange}
                      maxLength="3"
                      onInput={inputMaxLength}
                      required
                    />
                  </td>
                </tr>
              </tbody>
            </table>

            <div className="container">
                <div className="row">
                    <div className="col-6 col-form-promo">
                        <Link to="/">
                            <button
                            className="btn btn-form-promo"
                            onClick={props.close}
                            >
                            Anuluj
                            </button>
                        </Link>
                    </div>
                    <div className="col-6 col-form-promo">
                            <button
                                className="btn btn-form-promo"
                                onSubmit={onSubmit}
                            >
                                Zapisz
                            </button>
                    </div>
                </div>
            </div>
          </form>
        </div>
      </div>
    </div>
  );
}

我不知道如何转换它。或者如果有人有更好的想法，我该怎么做。请告诉我 :-)。对象中的嵌套数组非常 com

Answer 1

你应该使用 FieldArray.

<FieldArray /> is a component that helps with common array/list manipulations. You pass it a name property with the path to the key within values that holds the relevant array. will then give you access to array helper methods via render props. For convenience, calling these methods will trigger validation and also manage touched for you.

您还可以看到一个 example 与您所处情况完全相同的数组，其中包含对象。

使用 Formik.js 时如何在对象中创建嵌套数组？

How to create nested array in object when I use Formik.js?

arrays

nested

reactjs

formik