Livewire 3 答题系统点击下一题报错：Undefined array key 5

问题原因 #

答完最后一题点击「Selanjutnya」时，questionIndex会被递增到5（你的题目数组有5个元素，索引范围是0-4），但视图仍尝试访问$questions[5]，导致「Undefined array key 5」错误。同时缺少测验完成后的状态控制，无法切换到结果页面。

修复方案 #

1. 更新Livewire组件代码 #

添加测验完成状态，调整nextQuestion逻辑避免索引越界：

<?php

namespace App\Livewire\Student;

use App\Models\Questions;
use Livewire\Component;

class Exams extends Component
{
    public $questions = [
        [
            'question' => 'Apa ibu kota Indonesia?',
            'answers' => [
                'A. Jakarta',
                'B. Bandung',
                'C. Surabaya',
                'D. Medan',
            ],
            'answer' => 'A',
        ],
        [
            'question' => 'Berapa jumlah provinsi di Indonesia?',
            'answers' => [
                'A. 34',
                'B. 33',
                'C. 32',
                'D. 31',
            ],
            'answer' => 'A',
        ],
        [
            'question' => 'Siapa presiden Indonesia saat ini?',
            'answers' => [
                'A. Joko Widodo',
                'B. Prabowo Subianto',
                'C. Anies Baswedan',
                'D. Ganjar Pranowo',
            ],
            'answer' => 'A',
        ],
        [
            'question' => 'Apa nama mata uang Indonesia?',
            'answers' => [
                'A. Rupiah',
                'B. Dollar Amerika',
                'C. Euro',
                'D. Yen Jepang',
            ],
            'answer' => 'A',
        ],
        [
            'question' => 'Apa ibu kota provinsi Jawa Barat?',
            'answers' => [
                'A. Bandung',
                'B. Jakarta',
                'C. Surabaya',
                'D. Medan',
            ],
            'answer' => 'A',
        ],
    ];

    public $score = 0;
    public $questionIndex = 0;
    public $question;
    public $quizCompleted = false; // 新增：标记测验是否完成

    public function mount()
    {
        $this->question = $this->questions[$this->questionIndex];
    }

    public function nextQuestion()
    {
        // 先判断是否还有下一题，避免索引越界
        if ($this->questionIndex < count($this->questions) - 1) {
            $this->questionIndex++;
            $this->question = $this->questions[$this->questionIndex];
        } else {
            // 最后一题完成，标记测验结束
            $this->quizCompleted = true;
            $this->dispatch('quizCompleted', $this->score);
        }
    }

    public function answer(string $answer)
    {
        if ($answer === $this->questions[$this->questionIndex]['answer']) {
            $this->score++;
        }

        $this->nextQuestion();
    }
}

2. 更新Blade视图代码 #

根据$quizCompleted状态切换显示内容，彻底避免访问不存在的数组索引：

@if(!$quizCompleted)
<div class="quiz">
    <div class="question">
        <div class="question-text">
            {{ $questions[$questionIndex]['question'] }}
        </div>
        <div class="question-answers">
            <input type="radio" name="answer" value="A" id="answer-a" wire:click="answer('A')">
            <label for="answer-a">{{ $questions[$questionIndex]['answers'][0] }}</label>

            <input type="radio" name="answer" value="B" id="answer-b" wire:click="answer('B')">
            <label for="answer-b">{{ $questions[$questionIndex]['answers'][1] }}</label>

            <input type="radio" name="answer" value="C" id="answer-c" wire:click="answer('C')">
            <label for="answer-c">{{ $questions[$questionIndex]['answers'][2] }}</label>

            <input type="radio" name="answer" value="D" id="answer-d" wire:click="answer('D')">
            <label for="answer-d">{{ $questions[$questionIndex]['answers'][3] }}</label>
        </div>
    </div>

    <div class="">
        <button class="" wire:click="nextQuestion">Selanjutnya</button>
    </div>
</div>
@else
<div class="result">
    <h2>Quiz Complete!</h2>
    <p>Skor Anda: {{ $score }}</p>
    <!-- 替换为你的跳转路由，比如返回首页 -->
    <a href="{{ route('home') }}" class="button">Kembali ke Beranda</a>
</div>
@endif

额外调整说明 #

• 移除了视图中默认选中正确答案的逻辑，改为点击选项触发答题判断，更符合用户实际操作流程。
• 测验完成后自动切换到结果页面，无需依赖CSS隐藏。
• 如需跳转指定页面，只需修改route('home')为你的目标路由即可。

内容的提问来源于stack exchange，提问作者umaruz xelina