Блог

Я пытаюсь обновить записи. Запрос PUT в серверной части работает нормально, возвращая 200 и обновляя записи при тестировании на Postman, однако, когда я пытаюсь обновить запись во внешней части (react), я не получаю никаких ошибок, но обновленная запись не обновляется при отправке, и обновленные поля (заголовок и тело) равны нулю. Обновленные значения равны нулю, когда я 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)
    }
  })
}
  

Ваша проблема заключается вот в чем:

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

post не определено.

Поскольку post не определено, данные не передаются. Следовательно, title и body равно null . Что вам нужно будет сделать, это, исходя из того, что я вижу в вашем коде, определить переменную состояния с именем post . Я думаю, вы намеревались это сделать:

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

Затем убедитесь, что ваш post обновляется всякий раз, когда вы values изменяете, используя useEffect() ,

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

Таким образом, к тому времени, когда вы вызываете свой editPost() http-put-метод, у post есть value . И это должно сработать.

в EditPost.js editPost(match.params.userId, match.params.id, token).then((data) => { здесь вам не хватает 4-го аргумента, который является «публикацией», которую вы сами отправляете для обновления