输入一个对象并将其发送到后端

Question

我有一个电子商务项目，这个项目包含一个用于创建产品的接口，以及一个用于创建包含多个字段的产品的接口

这些是它们出现在后台的字段:

mutation{
createProduct(createProductInput: {
En:{
title: "New Product"
description: "Adding a new Product just for testing"
tags: ["جديد" ,"اختبار"]
}
category: "62b2aef01ae9cf195d385bec"
collection: "62b2af1a2705c43f5cb64acb"
brand: "628f20060538cc5b9f58daf5"
}
}

在后端请求中很明显，有一个对象，其中有三个字段，标题，描述，标签，字符串数组，

我的问题是我不知道如何输入对象和数组"标签">

import { React, useState } from "react";
import {
Col,
Button,
Form,
FormGroup,
Label,
Input,
FormText,
Card,
CardImg,
} from "reactstrap";
import { useCategories } from "../../../../hooks/useCategories";
import { useCollections } from "../../../../hooks/useCollections";
import { useBrand } from "../../../../hooks/useBrand";
import Select from "react-select";
const AddProduct = () => {
const categories = useCategories();
const collections = useCollections();
const brands = useBrand();
const categoriesOptions = categories?.data?.categories;
const collectionsOptions = collections?.data?.collections;
const brandsOptions = brands?.data?.brands;
const [category, setCategory] = useState(0);
const [collection, setCollection] = useState(0);
const [brand, setBrand] = useState(0);
return (
<Card
style={{
boxShadow: "1px 1px 10px 1px #888888",
borderRadius: "3rem",
margin: "5rem",
padding: "4rem",
}}
>
<Form>
<h3 style={{ color: "black", fontWeight: "bold" }}>Add Product</h3>
<div col>
<img
width="30%"
height="40%"
style={{
paddingTop: "3rem",
paddingBottom: "3rem",
paddingRight: "3rem",
}}
src="https://themes.pixelstrap.com/multikart/back-end/assets/images/pro3/34.jpg"
alt="Card image cap"
/>
<div>
<FormGroup row>
<Label sm={2}>En:</Label>
<Col sm={10}>
<Input
type="text"
name="title"
id="title"
placeholder="title"

/>
<Input
type="text"
name="description"
id="description"
placeholder="description"
style={{ marginTop: '0.7rem', marginBottom: '0.7rem'}}
/>
<Input type="text" name="tags" id="tags" placeholder="tags" />
</Col>

</FormGroup>
<FormGroup row>
<Label for="exampleSelect" sm={2}>
Select Collection
</Label>
<Col sm={10}>
<Select
value={collection}
// onChange={handleChangeCollection}
onChange={(collectionsOptions) => {
console.log("value vvv:", collectionsOptions);
console.log("value.id: ", collectionsOptions.id);
setCollection(collectionsOptions.id);
}}
options={collectionsOptions}
getOptionLabel={(e) => e.name}
getOptionValue={(e) => e.id}
/>
</Col>
</FormGroup>
<FormGroup row>
<Label for="exampleSelect" sm={2}>
Select Category
</Label>
<Col sm={10}>
<Select
value={category}
onChange={(categoriesOptions) => {
console.log(
"value vvv categoriesOptions:",
categoriesOptions
);
console.log(
"value.id categoriesOptions: ",
categoriesOptions.id
);
setCategory(categoriesOptions.id);
}}
options={categoriesOptions}
getOptionLabel={(e) => e.name}
getOptionValue={(e) => e.id}
/>
</Col>
</FormGroup>
<FormGroup row>
<Label for="exampleSelect" sm={2}>
Select brands
</Label>
<Col sm={10}>
<Select
value={brand}
//onChange={handleChangeCollection}
onChange={(brandsOptions) => {
console.log("value vvv:", brandsOptions);
console.log("value.id: ", brandsOptions.id);
setBrand(brandsOptions.id);
}}
options={brandsOptions}
getOptionLabel={(e) => e.name}
getOptionValue={(e) => e.id}
/>
</Col>
</FormGroup>
</div>
</div>
<FormGroup check row>
<Col sm={{ size: 10, offset: 2 }}>
<Button>Submit</Button>
</Col>
</FormGroup>
</Form>
</Card>
);
};
export default AddProduct;

Answer 1

你应该创建多个输入来处理数组的值标签。我写了一个简单的代码

export default function App() {
const [tagsLength, setTagsLength] = useState(1);
const onSubmit = (e) => {
e.preventDefault();
const formData = Object.fromEntries(new FormData(e.target));
const formValue = Object.keys(formData).reduce((acc, cur) => {
const value = formData[cur];
if (!cur.includes("tags")) acc[cur] = value;
else {
if (!acc["tags"]) acc["tags"] = [value];
else acc["tags"].push(value);
}
return acc;
}, {});
console.log(formValue);
};
return (
<div className="App">
<h1>Hello CodeSandbox</h1>
<h2>Start editing to see some magic happen!</h2>
<form onSubmit={onSubmit}>
<input type="text" name="title" id="title" placeholder="title" />
<input
type="text"
name="description"
id="description"
placeholder="description"
style={{ marginTop: "0.7rem", marginBottom: "0.7rem" }}
/>
{[...Array(tagsLength).keys()].map((i) => (
<input type="text" name={`tags.${i}`} placeholder="tag name" />
))}
<button onClick={() => setTagsLength(tagsLength + 1)}>Add tag</button>
<input type="submit" />
</form>
</div>
);
}

codesandbox。你可以在控制台看到表单值，希望对你有帮助!