应该在哪里使用哪种舷菜？对象解构时使用方括号或大括号？我厌倦了使用上下文，但有点困惑

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变量在大括号内而不是方括号内？即使状态books是用useState钩子创建的，它也是一个数组。

Answer 1

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

因为useContext(BookContext)将作为value传递给提供程序的{ books, addBook, removeBook }对象返回。要销毁该对象，可以使用花括号。

当然，books本身就是一个数组，但这并不重要——您并不是为了获取数组元素而对其进行破坏。要做到这一点，你需要做一些类似的事情

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

甚至可以一气呵成：

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

Answer 2

• []用于析构函数数组
• ｛｝用于销毁对象

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

useContext(BookContext)

"接受一个上下文对象(从React.createContext返回的值(，并返回该上下文的当前上下文值">