为什么我确实有以下类型错误：无法读取未定义的属性“长度”？ （在反应中）

Question

我创建了一个上下文文件来在我的组件之间共享状态。为此，我创建了以下内容：

import { createContext, useReducer } from 'react'
import questions from '../data'

const initialState = {
    currentQuestIndex: 0,
    questions,
    showResults: false,
}

const reducer = (state, action) => {    
    switch (action.type) {        
        case 'NEXT_QUESTION':
            const showResults =
                state.currentQuestIndex === state.questions.length - 1
            const currentQuestIndex = showResults
                ? state.currentQuestIndex
                : state.currentQuestIndex + 1
            return {
                ...state,
                currentQuestIndex,
                showResults,
            }
        case 'RESTART':
            return {
                initialState,
            }
        default:
            return state
    }
    
}

// create a context
export const QuizContext = createContext()

// create a provider (to provide the data to all our components)
export const QuizProvider = ({ children }) => {
    const value = useReducer(reducer, initialState)
    console.log('state', value)
    
    return (
        <QuizContext.Provider value={value}>
            {children}
        </QuizContext.Provider>
    )
}

同时我尝试使用上下文但试图呈现初始状态我有类型错误：无法读取未定义的属性“长度”？ 这是我返回以再次呈现起始页面的状态：

import React, {useContext} from 'react'
import Question from './Question';
import { QuizContext } from './../context/quiz';

const Quiz = () => {
    const [quizState, dispatch] = useContext(QuizContext)
    const { questions, currentQuestIndex, showResults} = quizState
    // console.log("quizState", quizState)  

    return (
        <div className='quiz'>
            {!showResults && (
                <>
                    <div className='score'>Question { currentQuestIndex + 1 }/{ questions.length }</div>
                    <Question />
                    <div className='next-button' onClick={() => dispatch({ type: 'NEXT_QUESTION' })}>Question Suivante</div>
                </>
            )}
            {showResults && (
                <div className="results">
                    <div className="congratulations">Felicitatios!</div>
                    <div className="results-info">
                        <div>Vous avez completé le Quiz</div>
                        <div>Vous avez trouvé 5 des { questions.length } questions.</div>
                    </div>
                    <div className="next-button" onClick={() => dispatch({type: 'RESTART'})}>Redemarrer</div>
                </div>
            )}
        </div>
    )
}

export default Quiz

返回错误的行如下：

<div className='score'>Question { currentQuestIndex + 1 }/{ questions.length }</div>

数据结构：

const data = [
  {
    question: "What is CS stand for?",
    incorrectAnswers: [
      "Computer Sort",
      "Clasic Science",
      "Computer Style",
    ],
    correctAnswer: "Computer Science",
  }];

export default data;