英文:
How to send an array from a react Frontend to a mongo DB BackEnd
问题
以下是翻译好的部分：
在Postman中，我成功地通过这种方式发送数据来维护这个结构：{"categoryTags":["easy", "breakfast"]}，这将创建一个看起来像这样的结构：categoryTags: 0:"easy", 1:"breakfast"。这对于后续在我的前端上进行映射非常有用。当在前端检索到信息时，它会以这种方式到达：easy, breakfast，当编辑并推送到数据库时，它看起来像这样：categoryTags:0:"easy,breakfast"。我不知道如何从前端到后端维护这个结构。这是否可能？
这是我的React代码：
const EditRecipeModal = ({ recipe }) => {const oneRecipe = useSelector((state) => state.user.singleRecipe);const dispatch = useDispatch();useEffect(() => {dispatch(fetchSingleRecipe(recipe._id));}, []);const [tags, setTags] = useState([recipe.categoryTags]);const [title, setTitle] = useState(recipe.title);const [description, setDescription] = useState(recipe.description);const [ingredients, setIngredients] = useState(recipe.ingredients);const [instructions, setInstructions] = useState(recipe.instructions);const editedModal = {categoryTags: tags,title: title,description: description,ingredients: ingredients,instructions: instructions,};const onSubmitHandler = (e) => {e.preventDefault();dispatch(editRecipe(editedModal, `${recipe._id}`));};return (<div id="editRecipeModal"><h1>Edit {recipe.title}</h1><div><form onSubmit={onSubmitHandler}><label className="fw-bold">Category</label><inputonChange={(e) => setTags(e.target.value)}value={tags}type="text"placeholder={recipe.categoryTags}/><Form.Group className="mb-3"><Form.Label className="fw-bold">Title</Form.Label><Form.Controlvalue={title}onChange={(e) => setTitle(e.target.value)}type="text"placeholder="ingredients"/></Form.Group><Form.Group className="mb-3"><Form.Label className="fw-bold">Ingredients</Form.Label><Form.Controlvalue={ingredients}onChange={(e) => setIngredients(e.target.value)}type="text"placeholder="ingredients"/></Form.Group><Form.Group className="mb-3"><Form.Label className="fw-bold">Instructions</Form.Label><Form.Controlvalue={instructions}onChange={(e) => setInstructions(e.target.value)}type="text"placeholder="instructions"/></Form.Group><ButtonclassName="login-80p mb-4 fw-bold"variant="success"type="submit">Edit</Button></form></div><Button variant="danger">Delete</Button></div>);};export default EditRecipeModal;
这是我的后端模式：
const recipeSchema = new Schema({categoryTags: [{ type: String, required: true }],title: { type: String, required: true },photo: {type: String,required: false,default: "https://cdn-icons-png.flaticon.com/512/135/135161.png",},description: { type: String, required: false },ingredients: [{ type: String, required: false }],instructions: [{ type: String, required: false }],author: { type: Schema.Types.ObjectId, ref: "User", required: true },});export default model("Recipe", recipeSchema);
英文:
I have been building a recipe app (both front and back end). My issue is with the data structure and how to maintain it.
My recipe schema has a few properties that have an array of objects as values. On Postman, I am able to successfully maintain this structure by sending it like this {"categoryTags":["easy", "breakfast"]} and this creates a structure that looks like This: categoryTags: 0:"easy", 1:"breakfast"... This is great for mapping later on my frontend. The Information when retrieved on the frontend arrives like this: easy,breakfast and when edited and pushed to the db... it looks like this: categoryTags:0:"easy,breakfast". I don't know how to maintain the structure from the FE to the BE. Is this possible?
This is My React Code:
const EditRecipeModal = ({ recipe }) => {const oneRecipe = useSelector((state) => state.user.singleRecipe);const dispatch = useDispatch();useEffect(() => {dispatch(fetchSingleRecipe(recipe._id));}, []);const [tags, setTags] = useState([recipe.categoryTags]);const [title, setTitle] = useState(recipe.title);const [description, setDescription] = useState(recipe.description);const [ingredients, setIngredients] = useState(recipe.ingredients);const [instructions, setInstructions] = useState(recipe.instructions);const editedModal = {categoryTags: tags,title: title,description: description,ingredients: ingredients,instructions: instructions,};const onSubmitHandler = (e) => {e.preventDefault();dispatch(editRecipe(editedModal, `${recipe._id}`));};return (<div id="editRecipeModal"><h1>Edit {recipe.title}</h1><div><form onSubmit={onSubmitHandler}><label className="fw-bold">Category</label><inputonChange={(e) => setTags(e.target.value)}value={tags}type="text"placeholder={recipe.categoryTags}/><Form.Group className="mb-3"><Form.Label className="fw-bold">Title</Form.Label><Form.Controlvalue={title}onChange={(e) => setTitle(e.target.value)}type="text"placeholder="ingredients"/></Form.Group><Form.Group className="mb-3"><Form.Label className="fw-bold">Ingredients</Form.Label><Form.Controlvalue={ingredients}onChange={(e) => setIngredients(e.target.value)}type="text"placeholder="ingredients"/></Form.Group><Form.Group className="mb-3"><Form.Label className="fw-bold">Instructions</Form.Label><Form.Controlvalue={instructions}onChange={(e) => setInstructions(e.target.value)}type="text"placeholder="instructions"/></Form.Group><ButtonclassName="login-80p mb-4 fw-bold"variant="success"type="submit">Edit</Button></form></div><Button variant="danger">Delete</Button></div>);};export default EditRecipeModal;
This is my BE Schema:
const recipeSchema = new Schema({categoryTags: [{ type: String, required: true }],title: { type: String, required: true },photo: {type: String,required: false,default: "https://cdn-icons-png.flaticon.com/512/135/135161.png",},description: { type: String, required: false },ingredients: [{ type: String, required: false }],instructions: [{ type: String, required: false }],author: { type: Schema.Types.ObjectId, ref: "User", required: true },});export default model("Recipe", recipeSchema);
答案1
得分: 1
你可以将BE模式中的categoryTags定义为数组类型 { type: Array, required: true }。
英文:
you can define the categoryTags in the BE schema as array type { type: Array, required: true }
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论