usePage().props破坏我的网站的原因是什么?

huangapple go评论65阅读模式
英文:

Why does usePage().props break my website?

问题

以下是翻译好的部分:

"I'm a beginner in Laravel/InertiaJS. I'm following the tutorial at Laravel Bootcamp.

The following line of code makes the screen load blank, with no errors. If I comment this line out, it loads normally.

const { auth } = usePage().props;

Here's my code:

HandleInertiaRequests.php

public function share(Request $request)
{
    return array merge(parent::share($request), [
        'auth' => [
            'user' => $request->user(),
        ],
        'ziggy' => function () {
            return (new Ziggy)->toArray();
        },
    ]);
}

Controller

public function index(): Response
{
    return Inertia::render('Chirps/Index', [
        'chirps' => Chirp::with('user:id,name')->latest()->get(),
    ]);
}

Chirps/Index Component

export default function Index({ auth, chirps }) {
    const { data, setData, post, processing, reset, errors } = useForm({
        message: '',
    });

    ...

    return (
        <Authenticated auth={auth}>
            ...
                {chirps.map(chirp =>
                    <Chirp key={chirp.id} chirp={chirp} />
                )}
            ...
        </Authenticated>
    );
}

Chirp Component (with the error)

export default function Chirp({ chirp }) {
    // The page loads normally when I comment out the line below. Otherwise it loads blank with no error.
    const { auth } = usePage().props;

    return (
        <div>
        </div>
    );
}

I think I've included everything important above. Please tell me if I'm missing anything.

I need to know: Doesn't why this line of code from Laravel Bootcamp work?

Bonus points: Why am I not getting an error?

EDIT: I'm getting errors in the browser console.

Uncaught Error: usePage must be used within the Inertia component
英文:

I'm a beginner in Laravel/InertiaJS. I'm following the tutorial at Laravel Bootcamp.

The following line of code makes the screen load blank, with no errors. If I comment this line out, it loads normally.

const { auth } = usePage().props;

Here's my code:

HandleInertiaRequests.php

public function share(Request $request)
{
    return array_merge(parent::share($request), [
        &#39;auth&#39; =&gt; [
            &#39;user&#39; =&gt; $request-&gt;user(),
        ],
        &#39;ziggy&#39; =&gt; function () {
            return (new Ziggy)-&gt;toArray();
        },
    ]);
}

.

Controller

public function index(): Response
{
    return Inertia::render(&#39;Chirps/Index&#39;, [
        &#39;chirps&#39; =&gt; Chirp::with(&#39;user:id,name&#39;)-&gt;latest()-&gt;get(),
    ]);
}

.

Chirps/Index Component

export default function Index({ auth, chirps }) {
    const { data, setData, post, processing, reset, errors } = useForm({
        message: &#39;&#39;,
    });

    ...

    return (
        &lt;Authenticated auth={auth}&gt;
                ...
                    {chirps.map(chirp =&gt;
                        &lt;Chirp key={chirp.id} chirp={chirp} /&gt;
                    )}
                ...
        &lt;/Authenticated&gt;
    );
}

.

Chirp Component (with the error)

export default function Chirp({ chirp }) {
    // The page loads normally when I comment out the line below. Otherwise it loads blank with no error.
    const { auth } = usePage().props;

    return (
        &lt;div&gt;
        &lt;/div&gt;
    );
}

.

I think I've included everything important above. Please tell me if I'm missing anything.

I need to know: Doesn't why this line of code from Laravel Bootcamp work?

Bonus points: Why am I not getting an error?

EDIT: I'm getting errors in the browser console.

Uncaught Error: usePage must be used within the Inertia component

答案1

得分: 2

我遇到了同样的问题。最终问题的解决方法是将:

import { createInertiaApp } from '@inertiajs/inertia-react';

更改为:

import { createInertiaApp } from '@inertiajs/react';

在我的 app.tsx 中(如果您不使用TypeScript,则为 app.js)。

英文:

I had the same problem. In the end the problem was changing:

import { createInertiaApp } from &#39;@inertiajs/inertia-react&#39;;

to

import { createInertiaApp } from &#39;@inertiajs/react&#39;;

in my app.tsx (or app.js if you are not using typescript)

huangapple
  • 本文由 发表于 2023年2月23日 22:01:48
  • 转载请务必保留本文链接:https://go.coder-hub.com/75545828.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定