Thiết kế website giá rẻ

Question

I’m encountering an issue with passing data from my Laravel controller to an Inertia.js component. Despite setting the data in my controller, the Inertia component does not seem to receive the expected props.

Here are the details:

Controller Code:


<?php

namespace AppHttpControllers;

use AppModelsTask;
use IlluminateHttpRequest;
use IlluminateSupportFacadesLog;

class DashboardController extends Controller
{
    public function index()
    {
        $user = auth()->user();

        $totalPendingTasks = Task::query()
            ->where('status', 'pending')
            ->count();

        $myPendingTasks = Task::query()
            ->where([
                ['status', 'pending'],
                ['assigned_user_id', $user->id]
            ])
            ->count();

        $totalProgressTasks = Task::query()
            ->where('status', 'in_progress')
            ->count();

        $myProgressTasks = Task::query()
            ->where([
                ['status', 'in_progress'],
                ['assigned_user_id', $user->id]
            ])
            ->count();

        $totalCompletedTasks = Task::query()
            ->where('status', 'completed')
            ->count();

        $myCompletedTasks = Task::query()
            ->where([
                ['status', 'completed'],
                ['assigned_user_id', $user->id]
            ])
            ->count();

        return inertia('Dashboard', compact('totalPendingTasks', 'myPendingTasks', 'totalProgressTasks', 'myProgressTasks','totalCompletedTasks','myCompletedTasks'));
    }
}

Frontend Code (React):


import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout';
import { Head } from '@inertiajs/react';

export default function Dashboard({ auth, totalPendingTasks, myPendingTasks, totalProgressTasks, myProgressTasks,totalCompletedTasks,myCompletedTasks }) {
    return (
        <AuthenticatedLayout
            user={auth.user}
            header={<h2 className="font-semibold text-xl text-gray-800 dark:text-gray-200 leading-tight">Dashboard</h2>}
        >
            <Head title="Dashboard" />

            <div className="py-12">
                <div className="max-w-7xl mx-auto sm:px-6 lg:px-8 grid grid-cols-3 gap-2">
                    <div className="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                        <div className="p-6 text-gray-900 dark:text-gray-100">
                            <h3 className='text-amber-500 text-lg font-semibold'>
                                Pending Tasks
                            </h3>
                            <p className='text-md mt-4'>
                                <span className='mr-1'>{myPendingTasks}</span> / <span className='ml-1'>{totalPendingTasks}</span>
                            </p>
                        </div>
                    </div>
                    <div className="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                        <div className="p-6 text-gray-900 dark:text-gray-100">
                            <h3 className='text-blue-500 text-lg font-semibold'>
                                In Progress Tasks
                            </h3>
                            <p className='text-md mt-4'>
                                <span className='mr-1'>{myProgressTasks}</span> / <span className='ml-1'>{totalProgressTasks}</span>
                            </p>
                        </div>
                    </div>
                    <div className="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                        <div className="p-6 text-gray-900 dark:text-gray-100">
                            <h3 className='text-green-500 text-lg font-semibold'>
                                Completed Tasks
                            </h3>
                            <p className='text-md mt-4'>
                                <span className='mr-1'>{myCompletedTasks}</span> / <span className='ml-1'>{totalCompletedTasks}</span>
                            </p>
                        </div>
                    </div>
                </div>
            </div>
        </AuthenticatedLayout>
    );
}

Issue: When checking the props in the React component using console.log, all task-related props (totalPendingTasks, myPendingTasks, etc.) are undefined.
Network Response: In the network tab, the response when loading the dashboard does not contain the task counts.
Expected Result: The props should contain the task counts and be displayed on the dashboard.
What I Have Tried:

Logged the task counts in the controller (they are correct).
Checked the network response (task counts are missing).
Cleared Laravel and application caches.

Can anyone help me understand why the task counts are not being passed to the Inertia.js component?

Thanks in advance for your help!

Thiết kế website giá rẻ

Danh mục

Issue with Passing Data from Laravel Controller to Inertia.js Component