惯性网络状态302

Question

我正在使用Laravel惯性，当我试图发布新用户以后端获得302网络状态时，我会做出反应，如下所示：

CreateUser.jsx：

const onSubmit = (e) => {
    e.preventDefault()
    post(route('users.store'), { data, onSuccess: () => reset() })
}

UserController：

public function store(UserRequest $request)
{
    $attributes = $request->toArray();
    User::create($attributes);

    return back()->with([
        'type' => 'success',
        'message' => 'User was cretaed.'
    ]);
}

UserRequest：

public function rules()
{
    return [
        'name' => ['required','alpha'],
        'username' => ['unique:users','required','alphanum'],
        'email' => ['unique:users','required','email'],
        'password' => ['required', Password::defaults()],
        'location' => ['required']
    ];
}

到目前为止，我所得到的是：

​

​

Update I试图访问subseq GET req响应，结果是验证错误：

​

错误本身已经处理过了，但是错误通知从未发出：

import { useForm } from '@inertiajs/inertia-react'
import React from 'react'

export default function CreateUser({errors}) {
    const { data, setData, post, reset } = useForm({
        name: '',
        username: '',
        email: '',
        location: '',
        password: ''
    });

    const onChange = (e) => setData({...data, [e.target.id]: e.target.value})

    const onSubmit = (e) => {
        e.preventDefault()
        post(route('users.store'), { data, onSuccess: () => reset() })
    }


    return (
        <div className="card">
            <div className="card-header">Create New User</div>
            <div className="card-body">
                <form onSubmit={onSubmit}>
                    <div className="col-md-6">
                        <div className="mb-3">
                            <label htmlFor="name" className="form-label">Name</label>
                            <input type="text" className="form-control" id="name" name="name" value={data.name} onChange={onChange}/>
                            {errors && (<div className="text-danger mt-1">{errors.name}</div>)}
                        </div>
                        <div className="row">
                            <div className="col-md-6">
                                <div className="mb-3">
                                    <label htmlFor="username" className="form-label">Username</label>
                                    <input type="text" className="form-control" id="username" name="username" value={data.username} onChange={onChange}/>
                                </div>
                            </div>
                            <div className="col-md-6">
                                <div className="mb-3">
                                    <label htmlFor="email" className="form-label">Email</label>
                                    <input type="text" className="form-control" id="email" name="email" value={data.email} onChange={onChange}/>
                                    {errors && (<div className="text-danger mt-1">{errors.email}</div>)}
                                </div>
                            </div>
                        </div>
                        <div className="row">
                            <div className="col-md-6">
                                <div className="mb-3">
                                    <label htmlFor="location" className="form-label">Location</label>
                                    <input type="text" className="form-control" id="location" name="location" value={data.location} onChange={onChange}/>
                                    {errors && (<div className="text-danger mt-1">{errors.location}</div>)}
                                </div>
                            </div>
                            <div className="col-md-6">
                                <div className="mb-3">
                                    <label htmlFor="password" className="form-label">Password</label>
                                    <input type="password" className="form-control" id="password" name="password" value={data.password} onChange={onChange}/>
                                    {errors && (<div className="text-danger mt-1">{errors.password}</div>)}
                                </div>
                            </div>
                        </div>
                    </div>
                    <button className="btn btn-primary" type="submit">Save</button>
                </form>
            </div>
        </div>
    )
}

Answer 1

为了在React.js页面中使用共享数据，您需要使用usePage()，这就是您访问道具的方式。

下面是一个示例从医生那里

import { usePage } from '@inertiajs/inertia-react'

export default function Layout({ children }) {
  const { flash } = usePage().props

  return (
    <main>
      <header></header>
      <content>
        {flash.message && (
          <div class="alert">{flash.message}</div>
        )}
        {children}
      </content>
      <footer></footer>
    </main>
  )
}