put方法不在前端工作，但在邮递员中起作用

Question

请帮我。我正在做Pern stack应用程序，我不明白为什么我的PUT方法在前端不起作用，而是在Postman中工作。当我添加一个todo时 - 例如，在数据库ID中出现“饮用水”时，也会出现尾巴，但是当我在前端编辑该托多（Todo）时，数据库和前端也为无效。 ，，，， 看起来像这样：描述{ID：56，todo：null} 这是Edittodo.js的代码：

export default function EditTodo({ todo }) {
  const [description, setDescription] = useState(todo);
  console.log("todos", todo);
  console.log("description", description);
  //   Edit function
  const editText = async (id) => {
    try {
      const body = { description };
      const response = await fetch(`http://localhost:5000/todos/${id}`, {
        method: "PUT",
        headers: { "Content-Type": "application/json" },
        body: JSON.stringify(body),
      });
      console.log("response", response);
      window.location = "/";
    } catch (error) {
      console.error(error.message);
    }
  };
  return (
    <Fragment>
      <button
        type="button"
        className="btn btn-warning"
        data-toggle="modal"
        data-target="#myModal"
      >
        Edit
      </button>

      <div className="modal" id="myModal">
        <div className="modal-dialog">
          <div className="modal-content">
            <div className="modal-header">
              <h4 className="modal-title">Edit Todo</h4>
              <button
                type="button"
                className="close"
                data-dismiss="modal"
              ></button>
            </div>

            <div className="modal-body">
              <input
                type="text"
                className="form-control"
                value={description.todo}
                onChange={(e) => setDescription(e.target.value)}
              />
            </div>

            <div className="modal-footer">
              <button
                type="button"
                className="btn btn-warning"
                data-dismiss="modal"
                onClick={() => editText(todo.id)}
              >
                Edit
              </button>
              <button
                type="button"
                className="btn btn-danger"
                data-dismiss="modal"
              >
                Close
              </button>
            </div>
          </div>
        </div>
      </div>
    </Fragment>
  );
}

在我编辑TODO时，看起来Edittext函数未执行。 提前致谢。

Answer 1

您在哪里设置todo？ put请求用新值代替当前值。如果仅设置Description属性，但请将todo out放置，它将用一个空字符串覆盖它，清除您中的所有数据。要么在制作put请求之前设置todo的旧值，要么改用patch代替。一个补丁仅影响某些选定的值而不是所有内容。无论如何，仍然有可能使用put进行此操作。

尝试创建一个使用效率，以将其设置为待命。

类似的事情：

    const todoVar = description.find((desc)=> desc.id === todo.id);
    
    useEffect(()=>{
      if(todoVar){
        setDescription(description.todo)
      }
    },[todoVar, setDescription])

基本上，您要在制作put> put请求之前将todo值从数据库中设置为原始值。这样，它就不会空/空。