mern - 更新后的值在数据中为空

Posted 2023-02-16

【中文标题】mern - 更新后的值在数据中为空

【英文标题】：mern - updated values are null in data

【发布时间】：2020-12-02 12:05:36

【问题描述】：

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

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));
;

postsByUser.js

 <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)
    
  )

【问题讨论】：

数据来自读取，所以这就是您的问题所在，但我们没有后端代码，这一定是问题所在，因为它没有返回数据。

好的，谢谢，我已经添加了代码！ @7iiBob

当您检查您的状态时，您是否看到了这些值？

您能否确认exports.edit 内部的console.log() 确实打印出发送到响应对象的数据？

@Rahni，你能检查一下你得到了什么回应吗？我相信响应本身是 json 格式的，不需要转换成 json 格式。

【参考方案1】：

在 EditPost.js editPost(match.params.userId, match.params.id, token).then((data) => 中，您缺少第 4 个参数，即您发送以进行更新的“帖子”

【讨论】：

感谢您的回答。我添加了post 作为参数，但当我console.log(data) 时，我仍然收到标题和正文字段的空值。我尝试为 post 设置状态，但我似乎无法让它工作。 @AlyAbdElRahman

我会在 readById 的后端使用 console.log id 并检查终端并确保 id 可以通过。您确定帖子是从一开始就创建的吗？

是的，帖子肯定正在创建中，readById 也有效。我在readById 和edit 中有console.log(id)，它们都是正确的。 @7iiBob

@Rahni 能否请您更新 EditPost.js 中的代码 editPost，以便我们看到您如何发送帖子数据？

【参考方案2】：

你的问题在这里：

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

post 未定义。

由于未定义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 时，帖子就会有一个value。它应该可以工作。

【讨论】：

感谢您的回答。它有很大帮助，我现在在post 上获取标题和正文的值，尽管data 仍然为更新的值返回 null。基本上，post 只包含状态中的值（标题、正文和错误），而data 包含整个帖子。

至少我们越来越近了...你能不能请你的服务器中的console.log(updatedPost ) 看看title 和body 是否确实被服务器端接收到了？很明显，它们是从前端设置和发送的，但行为表明，如果它们返回 null，它们就不会被保存。请控制台日志，让我知道会发生什么？

我有 console.log(updatedPost) 并且值未定义。我得到 title: undefined, body: undefined @MosiaThabo

那么它们没有被传递到后端，或者它们没有被正确绑定。您需要做的就是确保它们进入后端。我认为这是目前唯一的问题。

毫无疑问，这些小问题/错误使功能花费的时间比原本需要的时间长得多，但我很高兴终于让这个编辑帖子功能正常工作。上来解决下一个问题：）谢谢！ @MosiaThabo