为什么Inertia.post方法将表单数据转储到查询字符串中



我在Laravel React堆栈中使用Inertia,并且有一个页面组件,可以让我编写、编辑和删除博客文章,并在网站上实时预览它们的样式。

我有一个表单,它使用State钩子来更新其字段的值,并在右侧的样式div中显示表单数据。我还有POST路由,它直接指向一个控制器,该控制器进行一些转换并插入/更新/删除带有表单数据的站点数据库。

表单顶部,在React 17中:

<div className="editor">
{props.id && <h3>Editing {props.title}</h3>}
<form onSubmit={(e) => {
e.preventDefault;
!props.id ? // are we editing an existing post?
Inertia.post('gutenberg.new') : // if no, then insert a new one
!delPost.bool ? // if yes, are we deleting it?
Inertia.post('gutenberg.update') : // if no, then update with this ID
Inertia.post('gutenberg.delete') // if yes, then delete with this ID

控制器的公共方法之一,在这种情况下;编辑";路线如果这里的信息太多,很抱歉。我很好奇,当我试图做这样的事情时,是否禁止在控制器中使用这种逻辑,或者我是否无意中破坏了其他东西。在PHP中使用Laravel 9:

public function updatePost(Request $request) {
$postID = $request->input('id');
BlogPost::where('id', '=', $postID)->update([
'title' => $request->input('title'),
'slug' => $request->input('slug'),
'body' => $request->input('body'),
'image' => $request->input('image'),
'language' => $request->input('language'),
]);
/* Now, we pull the existing associative records for the post in
from the post tags table to compare them to the tags that were
sent to the backend. That way, I can edit the tags for each post 
within the editor itself.
*/
$comparisonTags = PostTags::join('tags', 'tags.id', '=', 'post_tags.tag_id')
->where('post_tags.post_id', '=', $postID)
->get();
// Get the tags included in the request
$collectedTags = collect(json_decode($request->input('tags')));
foreach ($collectedTags as $index => $tag) {
// Add any totally new tags
Tags::upsert(['name' => $tag], ['id', 'name']);
/* "If the tags included in the update request contain something
that the post tags table doesn't for this post ID, then insert
them there." */
if (!$comparisonTags->contains('name', $tag)) {
$tagID = Tags::select('id')->where('name', '=', $tag)->get('id')->toArray();
$scalarTagID = strval($tagID[0]['id']);
PostTags::insert([
'post_id' => $postID,
'tag_id' => $scalarTagID,
]);
}
}
foreach ($comparisonTags as $id => $tag) {
/* "If the tags in the post tags table associated with the 
updated post's ID contain something that the new tag list 
does not, then remove those tags from the post tags table."
*/
if (!$collectedTags->contains($tag->name)) {
PostTags::where('tag_id', '=', $tag->id)->delete();
}
}
return Redirect::route('index');
// Inertia requests need Inertia responses
// country roads... take me home...
}
public function deletePost(Request $request) {
// pretty self-explanatory
$postID = $request->input('id');
BlogPost::where('id', '=', $postID)->delete();
PostTags::where('post_id', '=', $postID)->delete();
return Redirect::route('index');
}}

有问题的路线:

Route::post('gutenberg/edit',
[Gutenberg::class, 'updatePost'])
->name('gutenberg.update');

当使用Inertia.post方法将表单数据发送到控制器进行处理时,会出现问题。当我使用普通的HTML表单操作方法时,这个问题不会出现,但我想使用Inertia的访问方法,这样我就可以在网站上使用CSRF保护。

提交表单后,页面不会重定向到控制器为POST方法函数返回的Inertia响应,而是将所有表单数据转储到查询字符串中。后端没有发生任何事情,因为数据库没有更新,旧的表单数据在页面上仍然可见。

我的浏览器在点击";提交"注意具有标题属性"的查询字符串;一个非常不同的标题";从最初愤怒的愤怒中解脱出来。

控制器是否会引入某种意外的JSON响应,从而破坏Inertia.post方法?我用Firefox的调试器完成了整个过程,我看到的唯一一件不同寻常的事情是一条可怕的16000个字符宽的行,其中包括关于每个需要有效Inertia响应的Inertia请求的字符串。

如有任何帮助,我们将不胜感激。

我忘记了event.prventDefault((.上的括号

相关内容

  • 没有找到相关文章

最新更新