javascript - 在 React 中，当我触发另一个组件中的 Add 函数时，如何正确使用钩子(Hook)来更新一个组件？

Question

我正在构建一个用于查找书籍以学习 React 的应用程序。我不知道如何将我的所有图书列表(“图书列表”)中的一本书添加到单独的“阅读列表”中。我有一个书籍的 JSON 数据文件，如下所示:

[
  {
    "descr": "Take a voyeuristic look at life in Sheffield...",
    "author": "Philip Hensher",
    "title_id": "9812",
    "title": "The Northern Clemency",
    "cover": "https://www.whichbook.net/assets/images/big/9812.jpg",
    "similar": "https://www.whichbook.net/#cmd=search&search-type=3&id=9812"
  },
  ...
]

我在 BookList.js 组件中循环遍历它们以显示每本书和“添加到阅读列表”的按钮，如下所示:

export default function BookList ({ handleAddBook }) {
    return (
        <div>
            {BookData.map((book) => {
                return (
                <>
                    <BookDetail key={book.title_id} book={book} />
                    <button onClick={handleAddBook}>Add to Reading List</button>
                </>
                )
            })}
        </div>
    )
}

对于每个 BookDetail，我只显示标题和 title_id。在 BookDetail.js 中:

export default function BookDetail({ book }) {
    return (
        <div>
            <h1>{book.title}</h1>
            <p>{book.title_id}</p>
        </div>
    )
}

这很好用。我看到了我所有书籍的 list 。现在，在我的 ReadingList.js 中，我尝试循环浏览与 BookList 类似的书籍，但功能组件具有 booksToRead论据:

export default function ReadingList({ booksToRead }) {
    return (
        <div>
            <h3>My Reading List</h3>
            {booksToRead.map((book) => {
                return (
                <>
                    <BookDetail key={book.title_id} book={book} />
                </>
                )
            })}
        </div>
    )
}

好的，现在让我们看看我尝试解决这个问题的 App.js。基本上我正在尝试使用 useState()和useEffect()更新我的booksToRead每当常量 newBookToRead 时数组更改，在 handleAddBook 中处理功能。我初始化了booksToRead带有虚拟数据，它显示在浏览器中，但从不更新。

function App() {

    const [books, setBooks] = useState([])
    const [booksToRead, setBooksToRead] = useState([{ title: 'initialBookToRead', title_id: '1234' }])
    const [newBookToRead, setNewBookToRead] = useState([{ title: 'addMe', title_id: '000' }])

    function handleAddBook() {
        setNewBookToRead(newBookToRead)
    }

    useEffect(() => {
        setBooksToRead(booksToRead => [...booksToRead, newBookToRead])
    }, [newBookToRead])


  return (
    <main>
        <BookList books={books} />
        <ReadingList booksToRead={booksToRead} />
    </main>
  );
}

export default App;

我尝试将逻辑移动到不同的组件，我尝试使用 createContext 创建一个 ReadingListContext并使用 ReadingListContext.Provider value={booksToRead}而不是 <ReadingList>标签，我就是搞不懂。

此外，可能不相关，我的控制台给了我 Warning: Each child in a list should have a unique "key" prop.对于两者BookList和ReadingList ，即使我将 key 设置为 book.title_id这是一个独特的代码。 ????

Answer 1

export default function BookList ({ books, handleAddBook }) {
return (
    <div>
        {books.map((book) => {
            const onAddBook = () => handleAddBook(book);
            return (
            <>
                <BookDetail key={book.title_id} book={book} />
                <button onClick={onAddBook}>Add to Reading List</button>
            </>
            )
        })}
    </div>
)
}

function App() {

    const [books, setBooks] = useState([])
    const [booksToRead, setBooksToRead] = useState([{ title: 'initialBookToRead', title_id: '1234' }])

    function handleAddBook(book) {
        setBooksToRead([...booksToRead, book])
    }


  return (
    <main>
        <BookList books={books} handleAddBook={handleAddBook}/>
        <ReadingList booksToRead={booksToRead} />
    </main>
  );

}

export default App;

请使用以上组件。您需要将 book 作为参数传递给handleAddBook。无需存储 newBookToRead 和 useEffect，您可以使用提到的handleAddBook。