Получение неопределенного для ловушки useContext () при использовании функционального контекста

Question

BookContext. js

import React, { createContext, useState } from 'react'
export const BookContext = createContext()
export default function BookContextProvider(props) {
    const [books, setbooks] = useState([
        { title: 'the way of kings' , id:1 },
        { title: 'the name of the wind', id:2 },
        { title: 'the final empire', id:3 }
    ])
    return (
        <BookContext.Provider value={{books}}>
            { props.children }
        </BookContext.Provider>
    )
}

Booklist. js

import React, { useContext } from 'react'
import { ThemeContext } from '../contexts/ThemeContext'
import { BookContext } from '../contexts/BookContext'
export default function Booklist() {
  // Object destructuring
  const { isLightTheme, light, dark } = useContext(ThemeContext)
  const theme = isLightTheme ? light : dark
  const { books } = useContext(BookContext)
  return (
    <div className="book-list"  style={{color: theme.syntax, background: theme.bg}}>
      <ul>
        <li style={{background: theme.ui}}>the way of kings</li>
        <li style={{background: theme.ui}}>the name of the wind</li>
        <li style={{background: theme.ui}}>the final empire</li>
      </ul>
    </div>
  )    
}

Получение неопределенного для useContext (). При разрушении контекста выдается ошибка типа. TypeError: Невозможно уничтожить свойство 'books' объекта '(()) (...)', так как оно не определено. Как я могу решить это?

Answer 1

По умолчанию контекст имеет неопределенное значение. Вы можете указать начальное значение , чтобы избежать этой проблемы, когда компонент монтируется за пределами поставщика. Хук useContext будет использовать значение контекста по умолчанию, когда провайдер не найден.

export const BookContext = createContext({ books: [] });