Ich versuche, eine Flash-Nachricht für einen Benutzer in meiner App zurückzugeben, wenn er ein Formular ausfüllt und zurück zum "Dashboard" umgeleitet wird.
Ich bin ziemlich neu bei Inertia, also bin ich es vielleicht, aber die Dokumentation scheint nicht zu ausführlich zu sein. Ich habe mich gefragt, wie ich diese Flash-Funktion korrekt aufrufe und sie auf der Frontend-Seite in der Dashboard.js-Datei abrufe.
Dies ist mein Controller- und Dashboard-Dateicode:
public function completeForm(Request $request){
$request->validate([
'commitment' => 'required|string',
'partner' => 'required|string',
'question' => 'required|string',
]);
$user = Auth::user();
$user->update([
'partner' => $request->partner,
'commitment' => $request->commitment,
'question' => $request->question,
]);
return redirect('/dashboard')->with('success', 'Your profile has been updated!');
}
Und Dashboard:
export default function Dashboard(props) {
const [modalVisible, setModalVisible] = useState(false);
console.log(props);
const handleModal = () => {
setModalVisible(true);
};
return (
<Empty
auth={props.auth}
errors={props.errors}
header={
<h2 className="font-semibold text-xl text-gray-800 leading-tight">
Dashboard
</h2>
}
>
<Head title="Dashboard" />
<div className="py-12">
<div className="max-w-3xl mx-auto sm:px-6 lg:px-8">
{/* <div className="bg-white overflow-hidden shadow-sm sm:rounded-lg">
<div className="p-6 bg-white border-b border-gray-200">
You're logged in!
</div>
</div> */}
<div className="bg-yellow-500 px-1 py-1 inline-block ">
<p className="text-6xl font-bold uppercase text-white custom">
Your Details
</p>
</div>
{/* {flash.message && <div class="alert">{flash.message}</div>} */}
<div className="mt-16 border-2 border-yellow-500 p-2">
<p className="text-xl font-bold italic">
Next, we'd need you to submit your questions to us
for review
</p>
<div className="flex flex-col">
<p className="italic text-gray-400 text-lg font-medium mt-2">
Please use the button below to start filling out
your form:
</p>
<a
href="/commitment-questions"
className="text-center bg-yellow-500 py-2 px-3 self-center mt-8 text-2xl custom text-white font-bold mb-4"
>
Complete Form
</a>
</div>
</div>
</div>
</div>
</Empty>
);
}
Ich weiß, dass es wahrscheinlich einfach ist, danke im Voraus für jede Hilfe in diesem Fall!
Lösung des Problems
Teilen Sie eine Flash-Nachricht, damit sie global verfügbar ist, und verwenden Sie sie dann bei Bedarf in Ihren React-Komponenten: https://inertiajs.com/shared-data#flash-messages
class HandleInertiaRequests extends Middleware
{
public function share(Request $request)
{
return array_merge(parent::share($request), [
'flash' => [
// in your case, you named your flash message "success"
'message' => fn () => $request->session()->get('message')
],
]);
}
}
Verwenden Sie es dann in einer beliebigen React-Komponente:
import { usePage } from '@inertiajs/inertia-react'
export default function Dashboard() {
const { flash } = usePage().props
return (
<main>
<div>
{flash.message && (
<div class="alert">{flash.message}</div>
)}
</div>
</main>
)
}
Keine Kommentare:
Kommentar veröffentlichen