英文:
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), [
'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
答案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 '@inertiajs/inertia-react';
to
import { createInertiaApp } from '@inertiajs/react';
in my app.tsx
(or app.js
if you are not using typescript)
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库,让每个人都能够通过互相帮助和分享经验来进步。
评论