gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 03:58:54 26 4
gpt4 key购买 nike

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

我想知道是否可以转换所有内容以便从数组创建对象除非有人知道更好的方法或想法?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>
);
}

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

最佳答案

你应该使用 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与您遇到的完全相同的情况,数组中包含对象。

关于arrays - 使用 Formik.js 时如何在对象中创建嵌套数组?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/57576416/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com