应该在哪里使用哪个支架？ object 解构时方括号或花括号？ 我很想使用上下文但有点困惑

Question

这是我的上下文，我想在我的 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 变量在花括号内而不是方括号内？ 即使 state ie书籍是使用 useState 挂钩创建的也是一个数组。

Answer 1

为什么 books 变量在花括号内而不是方括号内？

因为useContext(BookContext)返回您作为value传递给提供者的{ books, addBook, removeBook } object。 要解构 object，您可以使用大括号。

当然， books本身是一个数组，但这并不重要——您不会解构它来获取数组元素。 为此，你会做类似的事情

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

甚至在一个 go 中：

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

Answer 2

• [] 用于解构 arrays
• {} 用于解构对象

根据https://reactjs.org/docs/hooks-reference.html

useContext(BookContext)

“接受上下文 object（从 React.createContext 返回的值）并返回该上下文的当前上下文值。”