标签: inertiajs
清除 React Hooks 中未安装组件的内存泄漏
我是使用 React 的新手，所以这可能很容易实现，但即使我做了一些研究，我也无法自己弄清楚。如果这太愚蠢，请原谅我。
语境
我将Inertia.js与 Laravel（后端）和 React（前端）适配器一起使用。如果你不知道惯性，它基本上是：
Inertia.js 可让您使用经典的服务器端路由和控制器快速构建现代单页 React、Vue 和 Svelte 应用程序。
问题
我正在做一个简单的登录页面，它有一个表单，提交时将执行 POST 请求以加载下一页。它似乎工作正常，但在其他页面中，控制台显示以下警告：
警告：无法对卸载的组件执行 React 状态更新。这是一个空操作，但它表明您的应用程序中存在内存泄漏。要修复，请取消 useEffect 清理函数中的所有订阅和异步任务。
在登录中（由 Inertia 创建）
相关代码（我已经对其进行了简化以避免不相关的行）：
import React, { useEffect, useState } from 'react'
import Layout from "../../Layouts/Auth";
{/** other imports */}
const login = (props) => {
const { errors } = usePage();
const [values, setValues] = useState({email: '', password: '',});
const [loading, setLoading] = useState(false);
function handleSubmit(e) {
e.preventDefault();
setLoading(true);
Inertia.post(window.route('login.attempt'), values)
.then(() => {
setLoading(false); …推荐指数
解决办法
查看次数
Laravel + Inertia + Vite 中的默认持久布局
在以前在 Laravel 应用程序中设置惯性的方法中，我可以调整 `createInertiaApp 函数中的解析属性：
{
...,
resolve: name => import("./Pages/${name}"),
...
}
到
{
...,
resolve: name => {
const page = require("./Pages/${name}").default
if(!page.layout) {
page.layout = DefaultLayoutFile
}
},
...
}
允许我手动传递要在页面中使用的默认布局文件。
但随着 Vite 成为默认的资源捆绑器，并且根据文档，我必须使用一个resolvePageComponent函数，该函数接受import.meta.glob第二个参数来指示 Vite 要捆绑哪些文件。
这里的问题是导入从此返回resolvePageComponent，因此我无法像通常从 require 函数那样访问默认对象。
所以我无法将默认布局文件附加到导入的页面。
有人能找到解决方法吗？
推荐指数
解决办法
查看次数
所有 Inertia 请求都必须接收有效的 Inertia 响应，但收到的是纯 JSON 响应
我正在尝试理解并解决这个 InertiaJs 错误，但没有成功，我希望我能在这里得到一些帮助。
推荐指数
解决办法
查看次数
将根类添加到 Laravel / Inertia
好吧，我要疯了……
我需要class="h-full"使用 Inertia 添加到 Laravel Jetstream 内的根 div。原因是在使用 Tailwind UI 的 vue 文件中，它需要以下内容
但是，每当我更改 app.blade.php 中的任何内容时，@inertia 都会覆盖它。我可以使用网络检查器手动添加它，该检查器可以解决它，但我不知道在应用程序内哪里可以对其进行修改。我不知道为什么。
请查看突出显示的 Web 检查器屏幕截图，了解它需要去哪里
下面的代码是 app.blade.php 文件。
<!DOCTYPE html>
<html lang="{{ str_replace('_', '-', app()->getLocale()) }}" class="h-full">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title inertia>{{ config('app.name', 'Laravel') }}</title>
<!-- Fonts -->
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Nunito:wght@400;600;700&display=swap">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Audiowide&display=swap">
<!-- Styles -->
<link rel="stylesheet" href="{{ mix('css/app.css') }}">
<!-- Scripts -->
@routes
<script src="{{ mix('js/app.js') }}" defer></script>
</head>
<body class="font-sans antialiased h-full">
@inertia
@env ('local') …推荐指数
解决办法
查看次数
Laravel Jetstream Inertia 共享全球应用数据
我想分享一些我发现的东西，因为那里没有太多信息（我找不到）。带有 Jetstream Inertia 的 Laravel 8 有一些共享对象，例如用户、当前路由……您可以使用 $page 变量在组件中访问它们。我需要添加一个菜单数组作为全局变量，但无法弄清楚，即使在官方 Inertia 文档中找到了一些信息。只是在 Laravel Jetstream 中有所不同。
直到我找到了 Laravel Jetstream 的共享数据中间件（ShareInertiaData），我才知道怎么做。
这是：
- 在 app/Http/Middleware.php 中创建一个中间件。我叫我的 ShareInertiaCustomData。
<?php
namespace App\Http\Middleware;
use Inertia\Inertia;
class ShareInertiaCustomData
{
public function handle($request, $next)
{
Inertia::share([
'menu' => config('menu'),
]);
return $next($request);
}
}
- 放在app/Http/Kernel.php
protected $middlewareGroups = [
'web' => [
...
\App\Http\Middleware\ShareInertiaCustomData::class,
],
];
我希望这会有所帮助，没有其他人需要花费数小时来解决这个问题。
global-variables shared-data inertiajs laravel laravel-jetstream
推荐指数
解决办法
查看次数
所有 Laravel 路线均已公开。如何将其移动到 app.js 或缩小（如果可能）
我在 Laravel、Vue.js 和 Inertia js 项目中使用 Ziggy。在查看页面源代码中，我可以清楚地看到所有 Laravel 路由。
<script type="text/javascript">
const Ziggy = {"url":"http:\/\/127.0.0.1:8787","port":8787,"defaults":{},"routes":
......
"sup_finish_tt_order":{"uri":"front\/finishorder","methods":["POST"]},"assign__tt":{"uri":"front\/assigntt","methods":["POST"]},"technicians":{"uri":"technicians","methods":["GET","HEAD"]},"change-password":{"uri":"change-password","methods":["GET","HEAD"]},"reset.password":{"uri":"c
----------
</script>
有没有办法在 app.js 中重新定位这个 Ziggy 对象或使其不那么明显？根据Ziggy文档和此处尝试的答案，我尝试将其导入 app.js,a 但它不起作用。
未捕获的类型错误：无法读取 Object.inherits (app.js:124712) 处未定义的属性“原型”。(app.js:68991) 在 Object../node_modules/irc/lib/irc.js (app.js:69342) 在webpack_require (app.js:64) 在 Object../node_modules/ziggy/index.js ( app.js:140181) 在webpack_require (app.js:64) 在 Module../resources/js/app.js (app.js:141504) 在webpack_require (app.js:64) 在 Object.0 (app.js) js:142081) 在webpack_require (app.js:64)
___________________________设置 ______________________________________
//后端
$ php artisan ziggy:generate
File generated!
// 示例 /resources/js/ziggy.js 文件
const Ziggy = {"url":"http:\/\/127.0.0.1:8787","port":8787,"defaults":{},"routes":{"debugbar.openhandler":{"uri":"_debugbar\/open" /*..... All named routes as …推荐指数
解决办法
查看次数
Inertiajs - Laravel：如何抛出自定义错误
如何在 Inertiajs.vue 中从 Laravel 抛出自定义错误而不进行重定向？
Vue 组件：
Inertia.post('company-organisations-create', {
name: this.newOrganisation.name,
description: this.newOrganisation.description
},
{
preserveScroll: true,
onSuccess: (page) => {
return Promise.all([
window.Toast.success(this.$page.props.toast.message),
this.newOrganisation.name = '',
this.newOrganisation.description = '',
])
},
onError: (errors) => {
window.Toast.error(errors.toastMessage)
}
});
LaravelController():
public function createOrganisations(Request $request)
{
try {
CompanyOrganisations::create([
'company_id' => $companyID,
'name' => $orgName,
'description' => $orgDescription,
]);
} catch(Excpetion) {
// Create Inertia Error 'onError'
/* As example with json response
return response()->json([
'message' => 'ups, there was an …推荐指数
解决办法
查看次数
访问 Inertia.js Vue 文件中 Laravel 的 .env 变量
我从 Inertia Laravel 示例开始https://github.com/drehimself/inertia-example
这只是 Laravel 和 Vue 在一个整体代码库中，使用 Inertia.js：https: //github.com/inertiajs/inertia-laravel https://github.com/inertiajs/inertia-vue
我正在尝试访问 .vue 组件文件中 Laravel 的 .env 变量
.env 文件：
APP_NAME=ABC
在应用程序\Providers\AppServiceProvider.php中：
APP_NAME=ABC
在 resources\js\Home.vue 组件中：
<template>
<div>
<span class="tw-text-left">{{ appName }}</span>
</div>
</template>
<script>
export default {
props: [
"appName",
]
}
</script>
在我的 vue 控制台中，appName 显示为空白。它应该显示“ABC”，但没有。这里发生了什么，以及我如何访问所有环境变量，理想情况下不通过控制器传递所有内容，这似乎不是很有效？
推荐指数
解决办法
查看次数
如何通过 Laravel 8惯性中的模型访问关系
我在用户表和区域表之间有一对多的关系，当我返回配置文件数据时，我从用户表中获取area_id，我需要使用模型获取区域名称。有没有办法在个人资料视图中获取区域名称？我尝试在 show.vue 中调用模型函数，但它不起作用。
用户.php
public function area()
{
return $this->belongsTo(Area::class);
}
区域.php
public function users()
{
return $this->hasMany(User::class);
}
显示.vue
<template>
<app-layout>
<template #header>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Profile
</h2>
<h2 class="font-semibold text-xl text-gray-800 leading-tight">
Area :
</h2>
</template>
<div>
<div class="max-w-7xl mx-auto py-10 sm:px-6 lg:px-8">
<div v-if="$page.props.jetstream.canUpdateProfileInformation">
<update-profile-information-form :user="$page.props.user" />
<jet-section-border />
</div>
<div v-if="$page.props.jetstream.canUpdatePassword">
<update-password-form class="mt-10 sm:mt-0" />
<jet-section-border />
</div>
<div v-if="$page.props.jetstream.canManageTwoFactorAuthentication">
<two-factor-authentication-form class="mt-10 sm:mt-0" />
<jet-section-border />
</div>
<logout-other-browser-sessions-form :sessions="sessions" class="mt-10 sm:mt-0" />
<template v-if="$page.props.jetstream.hasAccountDeletionFeatures"> …推荐指数
解决办法
查看次数
Tailwind CSS 不必要的空白
我正在尝试使用在 tailwind 工具箱中找到的这个管理入门模板，并尝试根据自己的喜好对其进行自定义。我已经将模板中的代码拆分为 3 个单独的文件，如下所示，当我children用一些东西替换主文件中的变量时，甚至像test我在页面底部得到一个带有大量额外空白的滚动条，如图所示这里
'Main' 文件导入导航栏和侧边栏，然后还有一个主页面内容的占位符
import Navbar from "@/Components/Layouts/Navbar"
import Sidebar from "@/Components/Layouts/Sidebar"
export default function Main({ name, children }) {
return (
<div className="bg-gray-800 flex flex-col h-screen">
<Navbar />
<div className="flex flex-col md:flex-row flex-grow">
<Sidebar />
<div className="flex-1 bg-gray-100">
<div className="bg-gray-800 pt-3">
<div className="rounded-tl-3xl bg-gradient-to-r from-blue-900 to-gray-800 p-4 shadow text-2xl text-white">
<h3 className="font-bold pl-2">{name}</h3>
</div>
</div>
<div className="p-4">
{children}
</div>
</div>
</div>
</div>
)
}
导航栏
import { useState } from …推荐指数
解决办法
查看次数
标签 统计
inertiajs ×10
laravel ×7
vue.js ×5
reactjs ×2
tailwind-css ×2
vuejs2 ×2
css ×1
html ×1
javascript ×1
laravel-5 ×1
laravel-8 ×1
laravel-vite ×1
promise ×1
react-hooks ×1
shared-data ×1