node.js - mern - 数据中更新的值为空

Question

我正在尝试更新帖子。后端的 PUT 请求工作正常，在 Postman 上测试时返回 200 并更新帖子，但是当我尝试在前端更新帖子( react )时，我没有收到任何错误，但更新的帖子没有被更新提交和 更新的字段(标题和正文)为空。 当我 console.log(data) 时更新的值为空在前端，这就是为什么它们没有被发送到后端，但它们在 post 中正确显示的原因.
为什么更新值null内data ?如何使用新值更新帖子而不是获取空值？data: post:
更新代码:前端

const EditPost = ({match}) => {
  const [values, setValues] = useState({
    title: "",
    body: "",
    error: ""
  });
  
  const [post, setPost] = useState({});
  const { user, token } = isAuthenticated();
  const {
    title,
    body,
    error,
  } = values;


  const init = (id) => { 
      read(id).then(data => {
if (data.error) {
    setValues({...values, error: data.error})
} else {
    setValues({...values,
         title: data.title,
        body: data.body,
    }) 
    setPost({title: values.title, body: values.body})
     }
    })
}
 

useEffect(() => {
    const id = match.params.id;
  init(id);
}, []);

useEffect(() => {
  setPost({...values });
}, [values.title, values.body]);


  const handleChange = (name) => (event) => {
    setValues({ ...values, [name]: event.target.value });
  };

  const clickSubmit = (event) => {
    event.preventDefault();
    setValues({ ...values, error: "" });

    editPost(match.params.userId, match.params.id, token, post).then((data) => {
      if (data.error) {
        setValues({ ...values, error: data.error });
      } else {
        setValues({
          ...values,
          title: "",
          body: "",
          error: false,
        });      
      console.log(post)
      console.log(data)
      }
    });
  };

  const newPostForm = () => (
    <form onSubmit={clickSubmit}>
      <div>
        <input
          onChange={handleChange("title")} type="text"
          name="title"
          value={title}
        />
      </div>

      <div className="form-group">
        <textarea
          onChange={handleChange("body")}
          value={body} name="body"
        />
      </div>

      <button type="submit">Publish</button>
    </form>
  );
  const showError = () => (
    <div
      style={{ display: error ? "" : "none" }}>
      {error}
    </div>
  );

  return (
        <div>  
          {showError()}
          {newPostForm()}
        </div>
  );
};

export default EditPost;

export const editPost = (userId, id, token, post) => {
    return fetch(`${API}/${userId}/${id}/edit`, {
        method: 'PUT',
        headers: {
            Accept: 'application/json',
            Authorization: `Bearer ${token}`
        },
        body: JSON.stringify(post)
    })
        .then(response => {
            return response.json();
            
        })
        .catch(err => console.log(err));
};

用户帖子

 <Link className="mypost_btn edit_btn" to={`/${_id}/${post._id}/edit`}>
     Edit
 </Link>

后端代码

exports.edit = (req, res) => {
  if (!ObjectID.isValid(req.params.id))
        return res.status(400).send(`ID is not valid: ${req.params.id}`)

  const {title, body} = req.body

  const updatedPost = {title, body }

  Post.findByIdAndUpdate(req.params.id, {
    $set: updatedPost
  }, {new:true}, (error, data) => {
    if (error) {
      return error
    } else {
      res.send(data)
      console.log(data)
    }
  })
}

Answer 1

你的问题在这里:

editPost(match.params.userId, match.params.id, token, post)

post is not defined.

自 post未定义，不传递任何数据。因此 title和 body等于 null .您需要做的是，假设根据我在您的代码中看到的内容，定义一个名为 post 的状态变量。 .我认为你打算这样做:

const [post, setPost] = useState({values.title, values.body});

然后确保每当您的 values 更新您的帖子使用 useEffect() 更改,

useEffect(() => {
   setPost({...values });
}, [values.title, value.body]);

因此，当您调用 editPost() 时http-put-method，然后post有 value .它应该工作。