Uncaught (in promise) TypeError: initialData is null - 我的组件被包装在一个 div 中，但仍然出现错误

Posted 2023-02-22

【中文标题】Uncaught (in promise) TypeError: initialData is null - 我的组件被包装在一个 div 中，但仍然出现错误

【英文标题】：Uncaught (in promise) TypeError: initialData is null - my components are wrapped in a single div but still getting the error

【发布时间】：2022-01-14 09:16:07

【问题描述】：

我收到一个初始数据为空错误。这已经在 github 论坛上讨论过了，但是，答案是该组件没有包装在单个 div 中。我的组件是。所以我仍然得到：

Uncaught (in promise) TypeError: initialData is null

我有一个简单的按钮，点击后会运行一个函数

这是由这段代码产生的：

<div class="mx-0 col-span-1 block font-medium text-sm text-gray-700 mb-0">
    <x-green-button-sm class="px-0 mx-0" title="Add a New person to the family." wire:click="createChild">
       <h3 class="my-0 text-xss">Add Child</h3>
    </x-green-button-sm>

   @livewire('admin.shared.edit-add-child', ['showEditAddChildModal' => $showEditAddChildModal,
             'editadd' => 'add',  'userid' => $user->id,  'registrantOrAdmin' => $registrantOrAdmin])
 </div>

在组件里面调用这个函数

public function createChild()
        $this->showEditAddChildModal = true;
 

请注意，上面的 livewire 组件传递了 $showEditAddChildModal 的值

admin.shared.edit-add-child刀片组件的开头是：

<div>

<form wire:submit.prevent="save">
    <x-modal.dialog wire:model="showEditAddChildModal">
......
.....
</div>  // the blade component is contained in a single div as required

所以努力使模型明显可见。 admin.shared.edit-add-child 刀片刀片引用这样的模型（公共属性）

wire:model.debounce.500ms="editChild.firstname"

EditAddChild.php 组件的设置如下：

<?php

namespace App\Http\Livewire\Admin\Shared;

use App\Models\Person;
use Livewire\Component;

class EditAddChild extends Component

    public $showEditAddChildModal = false;

//(if i set the above true, the modal does show up.)

    public $userid;
    public $txtmsgp;

    public $fullname;
    public $registrantOrAdmin;
    public $editadd;

    public $editChild; 
// (I started  with public Person $editChild but the system balked at //initializing a typed variable in the mount() function)

    public $dateOfBirth;

下面，请注意 $this->editadd 变量是在上面看到的@livewire 调用中传递的。 EditAddChild.php 组件中的 mount() 函数为：

public function mount()
    if($this->editadd == 'add')
        $this->editChild = $this->addNewChild();

addNewChild() 是：

public function addNewChild()
    

        return Person::make(['added_by' => auth()->user()->id,
            'updated_by' => null,
            'family_type' => 'child',
            'firstname' => '',
            'lastname' => '',
            'pronouns' => 'u',
            'sex' => 'u',
            'dob' => now(),
            'age_today' => 0,
            'mobile_phone' => null,
            'receive_texts' => 'u',
            'email' => '',
            'allow_emails' => 'u',
            'member' => 'u',
            'allow_photos' => 'u',
            'show' => 0,
        ]);

当我单击添加子按钮将 x-show 变量更改为 true 时，模式不显示并且控制台报告：

我很抱歉，但我想我也会列出整个情态成分。有两部分 [dialog.blade.php] ：

@props(['id' => null, 'maxWidth' => null])

<x-modal :id="$id" :maxWidth="$maxWidth"  $attributes >
    <div class="px-6 py-4">
        <div class="text-lg">
             $title 
        </div>

        <div class="mt-4">
             $content 
        </div>
    </div>

    <div class="px-6 py-4 bg-gray-100 text-right">
         $footer 
    </div>
</x-modal>

第二部分是[modal.bade.php]：

@props(['id', 'maxWidth'])

@php
$id = $id ?? md5($attributes->wire('model'));

$maxWidth = [
    'sm' => 'sm:max-w-sm',
    'md' => 'sm:max-w-md',
    'lg' => 'sm:max-w-lg',
    'xl' => 'sm:max-w-xl',
    '2xl' => 'sm:max-w-2xl',
    '3xl' => 'sm:max-w-3xl',
    '4xl' => 'sm:max-w-4xl',
    '5xl' => 'sm:max-w-5xl',
    '6xl' => 'sm:max-w-6xl',
    '7xl' => 'sm:max-w-7xl',

][$maxWidth ?? '3xl'];
@endphp

<div
    x-data="
        show: @entangle($attributes->wire('model')).defer,
        focusables() 
            // All focusable element types...
            let selector = 'a, button, input, textarea, select, details, [tabindex]:not([tabindex=\'-1\'])'

            return [...$el.querySelectorAll(selector)]
                // All non-disabled elements...
                .filter(el => ! el.hasAttribute('disabled'))
        ,
        firstFocusable()  return this.focusables()[0] ,
        lastFocusable()  return this.focusables().slice(-1)[0] ,
        nextFocusable()  return this.focusables()[this.nextFocusableIndex()] || this.firstFocusable() ,
        prevFocusable()  return this.focusables()[this.prevFocusableIndex()] || this.lastFocusable() ,
        nextFocusableIndex()  return (this.focusables().indexOf(document.activeElement) + 1) % (this.focusables().length + 1) ,
        prevFocusableIndex()  return Math.max(0, this.focusables().indexOf(document.activeElement)) -1 ,
    "
    x-init="$watch('show', value => 
        if (value) 
            document.body.classList.add('overflow-y-hidden');
         else 
            document.body.classList.remove('overflow-y-hidden');
        
    )"
    x-on:close.stop="show = false"
    x-on:keydown.escape.window="show = false"
    x-on:keydown.tab.prevent="$event.shiftKey || nextFocusable().focus()"
    x-on:keydown.shift.tab.prevent="prevFocusable().focus()"
    x-show="show"
    id=" $id "
    class="overflow-auto jetstream-modal fixed inset-0 overflow-y-auto px-4 py-6 sm:px-0 z-50"
    style="display: none;"
>
    <div x-show="show" class="fixed inset-0 transform transition-all" x-on:click="show = false"
                    x-transition:enter="ease-out duration-3000"
                    x-transition:enter-start="opacity-0"
                    x-transition:enter-end="opacity-100"
                    x-transition:leave="ease-in duration-3000"
                    x-transition:leave-start="opacity-100"
                    x-transition:leave-end="opacity-0">
        <div class="absolute inset-0 bg-gray-500 opacity-75"></div>
    </div>

    <div x-show="show" class="mb-6 bg-white rounded-lg overflow-hidden shadow-xl transform transition-all sm:w-full  $maxWidth  sm:mx-auto"
                    x-transition:enter="ease-out duration-300"
                    x-transition:enter-start="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
                    x-transition:enter-end="opacity-100 translate-y-0 sm:scale-100"
                    x-transition:leave="ease-in duration-200"
                    x-transition:leave-start="opacity-100 translate-y-0 sm:scale-100"
                    x-transition:leave-end="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95">
         $slot 
    </div>
</div>

【参考方案1】：

请在此处签到

@livewire('admin.shared.edit-add-child', ['showEditChildModal' => $showEditAddChildModal,
             'editadd' => 'add',  'userid' => $user->id,  'registrantOrAdmin' => $registrantOrAdmin])

恰好在“'showEditChildModal' => $showEditAddChildModal”部分。您将父属性 ($showEditAddChildModal) 绑定到子属性 ('showEditChildModal')，但在子组件中该属性不存在，而是您已将该属性声明为下一个：

public $showEditAddChildModal = false;

是你打错字了？？？

【讨论】：

谢谢。我修正了错字，我得到了相同的结果。啊。 ` true, 'editadd' => 'add', 'userid' => $user->id, 'registrantOrAdmin' => $registrantOrAdmin]) `