Node.js 使用获取和输入值字段更新产品_Node.js_Reactjs_Mongodb_Express

Node.js 使用获取和输入值字段更新产品

node.js reactjs mongodb express

Node.js 使用获取和输入值字段更新产品,node.js,reactjs,mongodb,express,Node.js,Reactjs,Mongodb,Express,我花了一整天的时间想弄明白这一点。我想使用RESTAPI调用（Node.js with Express）从数据库（MongoDB）中更新课程配方，方法是使用配方的新值对输入字段进行sumbit。我试图使用input value=“”来显示以前的值，但据我所知，这使它成为静态的。我试图根据我在网上找到的内容将其更改为动态，但是我找到的任何教程都无法显示我要查找的内容。正如您在下面的代码中看到的，我正在尝试放置以前使用setState（）设置的新数据。可悲的是，我不知道我怎么能这样做。你能告诉我这是

我花了一整天的时间想弄明白这一点。我想使用RESTAPI调用（Node.js with Express）从数据库（MongoDB）中更新课程配方，方法是使用配方的新值对输入字段进行sumbit。我试图使用input value=“”来显示以前的值，但据我所知，这使它成为静态的。我试图根据我在网上找到的内容将其更改为动态，但是我找到的任何教程都无法显示我要查找的内容。正如您在下面的代码中看到的，我正在尝试放置以前使用setState（）设置的新数据。可悲的是，我不知道我怎么能这样做。你能告诉我这是否可能，如果可能的话，我在哪里可以学习

以下是React的代码：

import React, { useState } from "react";
import { useHistory } from "react-router-dom";
import Alert from "../elements/Alert";
import Axios from "axios";

export default function UpdateCourse() {
  const id = window.location.href.split("?")[1];

  const [dishName, setdishName] = useState("");
  const [category, setcategory] = useState("");
  const [author, setauthor] = useState("");
  const [ingredients, setingredients] = useState([]);
  const [cookingTime, setcookingTime] = useState("");
  const [sourceUrl, setsourceUrl] = useState("");
  const [imageUrl, setimageUrl] = useState("");
  const [isPublished, setisPublished] = useState("true");
  const [price, setprice] = useState("");
  const [tags, settags] = useState([]);
  const [alert, setAlert] = useState("");
  const history = useHistory();

  const url = `http://localhost:1234/api/courses/find/${id}`;

  const old = async () => {
    const result = await Axios.get(url);
    setdishName(result.data.dishName);
    setcategory(result.data.category);
    setauthor(result.data.author);
    setingredients(result.data.ingredients);
    setcookingTime(result.data.cookingTime);
    setsourceUrl(result.data.sourceUrl);
    setimageUrl(result.data.imageUrl);
    setisPublished(result.data.isPublished);
    setprice(result.data.price);
    settags(result.data.tags);
  };
  old();
  console.log(old);

  async function update() {
    let item = {
      dishName,
      category,
      author,
      ingredients,
      cookingTime,
      sourceUrl,
      imageUrl,
      isPublished,
      price,
      tags,
    };

    console.log(item);
    console.log(JSON.stringify(item));

    const result = await fetch(`http://localhost:1234/api/courses/${id}`, {
      method: "PUT",
      body: JSON.stringify(item),
      headers: {
        "Content-Type": "application/json",
        Accept: "application/json",
      },
    });

    console.log(result);
    if (result.status !== 200) {
      return setAlert(result.status + " " + result.statusText);
    }

    history.push("/");
    window.location.reload();
  }

  return (
    <div className="col-sm-6" style={{ textAlign: "center" }}>
      <h1 className="bigBar">Update recipe</h1>
      <div style={{ marginLeft: "3.5rem" }}>
        {alert !== "" && <Alert alert={alert}></Alert>}
      </div>
      <input
        autoFocus="autofocus"
        required="required"
        type="text"
        className="form-control"
        placeholder={dishName}
        value={dishName}
        onChange={e => setdishName(e.target.value)}
      />
      <br />

      <input
        required="required"
        type="text"
        className="form-control"
        placeholder={category}
        value={category}
        onChange={e => setcategory(e.target.value)}
      />
      <br />

      <input
        type="text"
        onChange={e => setauthor(e.target.value)}
        className="form-control"
        required="required"
        placeholder={author}
        value={author}
      />
      <br />

      <input
        type="text"
        onChange={e => setingredients(e.target.value)}
        className="form-control"
        required="required"
        placeholder={ingredients}
        value={ingredients}
      />

      <br />
      <input
        type="text"
        onChange={e => setcookingTime(e.target.value)}
        className="form-control"
        required="required"
        placeholder={cookingTime}
        value={cookingTime}
      />
      <br />

      <input
        type="text"
        onChange={e => setsourceUrl(e.target.value)}
        className="form-control"
        required="required"
        placeholder={sourceUrl}
        value={sourceUrl}
      />
      <br />

      <input
        type="text"
        onChange={e => setimageUrl(e.target.value)}
        className="form-control"
        required="required"
        placeholder={imageUrl}
        value={imageUrl}
      />
      <br />

      <input
        type="text"
        onChange={e => setisPublished(e.target.value)}
        className="form-control"
        required="required"
        placeholder={isPublished}
        value={isPublished}
      />
      <br />

      <input
        type="text"
        onChange={e => setprice(e.target.value)}
        className="form-control"
        required="required"
        placeholder={price}
        value={price}
      />
      <br />

      <input
        type="text"
        onChange={e => settags(e.target.value)}
        className="form-control"
        required="required"
        placeholder={tags}
        value={tags}
      />
      <br />

      <button onClick={update} className="btn btn-primary">
        Submit
      </button>
    </div>
  );
}

以下是MongoDB的示例课程：

{
    "isPublished": true,
    "tags": [
        "pizza"
    ],
    "_id": "60ae108ddfb18463c046a5ba",
    "dishName": "Pizza with Cauliflower Crust",
    "category": "pizza",
    "ingredients": [
        {
            "_id": "60a4cfa48c20aa5c18517606",
            "quantity": 1,
            "unit": "",
            "description": "medium head cauliflower cut into florets"
        },
        {
            "_id": "60a4cfa48c20aa5c18517607",
            "quantity": 1,
            "unit": "",
            "description": "egg"
        },
        {
            "_id": "60a4cfa48c20aa5c18517608",
            "quantity": 0.5,
            "unit": "cup",
            "description": "mozzarella shredded"
        },
        {
            "_id": "60a4cfa48c20aa5c18517609",
            "quantity": 1,
            "unit": "tsp",
            "description": "oregano or italian seasoning blend"
        },
        {
            "_id": "60a4cfa48c20aa5c1851760a",
            "quantity": null,
            "unit": "",
            "description": "Salt and pepper to taste"
        },
        {
            "_id": "60a4cfa48c20aa5c1851760b",
            "quantity": 1,
            "unit": "cup",
            "description": "chicken cooked and shredded"
        },
        {
            "_id": "60a4cfa48c20aa5c1851760c",
            "quantity": 0.5,
            "unit": "cup",
            "description": "barbecue sauce"
        },
        {
            "_id": "60a4cfa48c20aa5c1851760d",
            "quantity": 0.75,
            "unit": "cup",
            "description": "mozzarella shredded"
        },
        {
            "_id": "60a4cfa48c20aa5c1851760e",
            "quantity": null,
            "unit": "",
            "description": "Red onion to taste thinly sliced"
        },
        {
            "_id": "60a4cfa48c20aa5c1851760f",
            "quantity": null,
            "unit": "",
            "description": "Fresh cilantro to taste"
        }
    ],
    "cookingTime": 60,
    "sourceUrl": "https://www.closetcooking.com/cauliflower-pizza-crust-with-bbq/",
    "imageUrl": "https://www.closetcooking.com/wp-content/uploads/2013/02/BBQ-Chicken-Pizza-with-Cauliflower-Crust-500-4699.jpg",
    "price": 29.99,
    "date": "2021-05-26T09:10:37.620Z",
    "__v": 0
}

单击按钮并发出PUT请求并更新值时，您还必须告诉组件状态以从后端镜像新更改。

因此，必须在PUT请求之后调用old（）方法（该方法处理抓取请求并设置状态）。这将确保组件状态与数据库中的值同步

下面是对update（）方法的一个小修改（我用箭头标记了它）：

异步函数更新（）{
让项目={
我的名字，
类别
作者
成分，
烹饪时间，
sourceUrl，
imageUrl，
已出版，
价格，
标签，
};
控制台日志（项目）；
log（JSON.stringify（item））；
const result=等待获取(`http://localhost:1234/api/courses/${id}`{
方法：“放”，
正文：JSON.stringify（项目），
标题：{
“内容类型”：“应用程序/json”，
接受：“应用程序/json”，
},
});
控制台日志（结果）；
如果（result.status！==200）{
返回setAlert（result.status+“”+result.statusText）；
}
历史。推送（“/”）；
window.location.reload（）；
old（）我不知道我是否理解正确，所以如果我错了，请纠正我。在用户更新了一些值并单击“提交”后-请求被发送到后端以更新数据库-现在您重新加载页面，并且希望输入值包括更新的值，而不是旧值（提交前），不是吗？是的，这正是我想要的。我还想包括输入字段中显示的旧值，这样用户就可以看到以前的内容，而不必重新键入整个内容，而只需更改这些值。不幸的是，当我输入用户可能想要更正的旧值时，它变成了静态的，我无法确定如何修改将其更改为动态（我在web上搜索答案，但所有教程在我的情况下都不起作用，或者至少我不太聪明，不足以包含它们）请检查我的答案，告诉我这是否对你有效谢谢你的回复，但遗憾的是我认为你误解了我的意思，我正在添加一个应用程序的屏幕截图，让它看起来更简单。从API获取数据是有效的，至少大部分是有效的。遗憾的是，因为成分是一个对象表，我无法正确获取它（如上图所示）。此外，我无法更改任何这些字段中的值，因为我正在设置输入值。这些是我的问题：如何正确显示成分，如何更改输入，因此尽管使用自定义值，但它们不是静态的，而是动态的。基本上，我希望用户能够更改这些输入中的值，以便更新recipe。我知道我可以使用占位符而不是值，但是用户必须自己键入整个内容（如果是成分，则很长）。在我看来，在输入中显示当前数据（旧）因此，他可以简单地更改他喜欢的内容，使其更易于使用。我知道“配料”字段看起来很糟糕，我在考虑如何让用户更容易填充，但由于它是一个对象表，我没有想到任何其他方法将值传递给它。感谢所有帮助谢谢你的回答！这似乎几乎解决了我的问题。遗憾的是，我发现这个解决方案只有一个问题。由于在从API获取数据后呈现成分，所以设置所有起始值的函数正在不确定地工作。我放置了simple console.log来测试这一点，似乎如果我调用start函数，那么在打印此cl 1000次后站点就会崩溃。我谈论的函数是old（）。我试着在不同的地方调用它，但每次都会重复，直到网站崩溃。在useEffect中调用它，依赖项为空。当组件挂载时，这应该只能获取一次。你是最好的人！非常感谢你：D
{
    "isPublished": true,
    "tags": [
        "pizza"
    ],
    "_id": "60ae108ddfb18463c046a5ba",
    "dishName": "Pizza with Cauliflower Crust",
    "category": "pizza",
    "ingredients": [
        {
            "_id": "60a4cfa48c20aa5c18517606",
            "quantity": 1,
            "unit": "",
            "description": "medium head cauliflower cut into florets"
        },
        {
            "_id": "60a4cfa48c20aa5c18517607",
            "quantity": 1,
            "unit": "",
            "description": "egg"
        },
        {
            "_id": "60a4cfa48c20aa5c18517608",
            "quantity": 0.5,
            "unit": "cup",
            "description": "mozzarella shredded"
        },
        {
            "_id": "60a4cfa48c20aa5c18517609",
            "quantity": 1,
            "unit": "tsp",
            "description": "oregano or italian seasoning blend"
        },
        {
            "_id": "60a4cfa48c20aa5c1851760a",
            "quantity": null,
            "unit": "",
            "description": "Salt and pepper to taste"
        },
        {
            "_id": "60a4cfa48c20aa5c1851760b",
            "quantity": 1,
            "unit": "cup",
            "description": "chicken cooked and shredded"
        },
        {
            "_id": "60a4cfa48c20aa5c1851760c",
            "quantity": 0.5,
            "unit": "cup",
            "description": "barbecue sauce"
        },
        {
            "_id": "60a4cfa48c20aa5c1851760d",
            "quantity": 0.75,
            "unit": "cup",
            "description": "mozzarella shredded"
        },
        {
            "_id": "60a4cfa48c20aa5c1851760e",
            "quantity": null,
            "unit": "",
            "description": "Red onion to taste thinly sliced"
        },
        {
            "_id": "60a4cfa48c20aa5c1851760f",
            "quantity": null,
            "unit": "",
            "description": "Fresh cilantro to taste"
        }
    ],
    "cookingTime": 60,
    "sourceUrl": "https://www.closetcooking.com/cauliflower-pizza-crust-with-bbq/",
    "imageUrl": "https://www.closetcooking.com/wp-content/uploads/2013/02/BBQ-Chicken-Pizza-with-Cauliflower-Crust-500-4699.jpg",
    "price": 29.99,
    "date": "2021-05-26T09:10:37.620Z",
    "__v": 0
}