Блог

Главная - Вопросы по программированию - Какие скобки следует использовать где? квадратные скобки или фигурные скобки при деструктурировании объекта? Я пытаюсь использовать контекст, но немного запутался

Какие скобки следует использовать где? квадратные скобки или фигурные скобки при деструктурировании объекта? Я пытаюсь использовать контекст, но немного запутался

#javascript #reactjs #destructuring #react-context

#javascript #reactjs #деструктурирование #реагировать-контекст

Вопрос:

Это мой контекст, и я хочу использовать его в своем компоненте BookList.

 import React, { createContext, useState } from "react"
import { v4 as uuidv4 } from "uuid"

export const BookContext = createContext()

const BookContextProvider = (props) => {
  const [books, setBooks] = useState([
    { title: "Deek Work", author: "Cal Newport", id: 0 },
    { title: "Principles", author: "Ray Dalio", id: 1 },
    { title: "Sapiens", author: "Yuval Noah Harari", id: 2 },
    { title: "Grit", author: "Angela Duckworth", id: 3 },
    { title: "Ikagai", author: "Hector Garcia", id: 4 },
  ])

  const addBook = (title, author) =>
    setBooks([...books, { title, author, id: uuidv4() }])

  const removeBook = (id) => setBooks(books.filter((book) => book.id !== id))

  return (
    <BookContext.Provider value={{ books, addBook, removeBook }}>
      {props.children}
    </BookContext.Provider>
  )
}

export default BookContextProvider

Компонент BookList:

 import React, { useContext } from "react"
import { BookContext } from "../contexts/BookContext"

const BookList = () => {
  const { books } = useContext(BookContext)
}

Почему переменная books находится внутри фигурных скобок, а не квадратных скобок? несмотря на то, что состояние, т.е. книги, создается с помощью useState hook, это массив.

Комментарии:

1. Это зависит от того, вы деструктурируете объект или массив? См developer.mozilla.org/en-US/docs/Web/JavaScript/Reference /…

2. useState([ передается массив объектов. Это помогает? const st = [{theobjects here]; useState(st); будет иметь тот же эффект

3. @MarkSchultheiss да, понял, спасибо

4. Потому useContext(BookContext) что возвращает { books, addBook, removeBook } объект, который вы передали value поставщику.

Ответ №1:

Почему переменная books находится внутри фигурных скобок, а не квадратных скобок?

Потому useContext(BookContext) что возвращает { books, addBook, removeBook } объект, который вы передали value поставщику. Чтобы деструктурировать этот объект, вы используете фигурные скобки.

Конечно, books сам по себе является массивом, но это не имеет значения — вы не разрушаете его, чтобы получить элементы массива. Чтобы сделать это, вы должны сделать что-то вроде

 const [firstBook, secondBook, ...otherBooks] = books;

или даже за один раз:

 const { books: [firstBook, secondBook, ...otherBooks] } = useContext(BookContext);

Ответ №2:

  • [] используется для деструктурирования массивов
  • {} используется для деструктурирования объектов

Согласно https://reactjs.org/docs/hooks-reference.html

 useContext(BookContext)

«Принимает объект контекста (значение, возвращаемое из React.createContext) и возвращает текущее значение контекста для этого контекста».

Комментарии:

1. Можно также поместить массив в контекст реакции.

2. Это правильно, но сам «BookContext» является объектом, что означает, что вы должны использовать фигурные скобки, чтобы деструктурировать его и получить доступ к массиву.

3. Нет. Никто не разрушает BookContext объект, это не имеет смысла. Мы говорим о возвращаемом значении useContext(…) .

4. Да, это была моя ошибка, я имел в виду возвращаемое значение useContext() , оно по-прежнему является объектом контекста