我正在使用react创建一个图书馆web应用程序，该应用程序的想法是使用每个图书组件上的选择按钮将图书分类到书架（想要阅读、当前阅读书架、阅读书架、无），目前有两个问题，第一：无法将事件绑定到函数回调，也无法将book元素存储在usestate钩子数组中，以使用其道具（如id）将书籍分类到书架中。我得到的错误

import React, { useState, useEffect } from "react";
import { getAll, search, get, update, api } from "./../BooksAPI";
function Book(props) {
  const [currState, setCurrState] = useState({
    shelf: [],
    book: [],
  });

  const updatingBooks = async function (event) {
    const shelf = event.target.value;
    const book = event.target.closest(".book");
    const { id } = book;

    setCurrState(() => {
      return currState.shelf.push(shelf);
    });
    setCurrState(() => {
      return currState.book.push(book);
    });

    await update(currState.shelf, currState.book);
  };

  useEffect(() => {
    updatingBooks();

    console.log(currState.shelf, currState.book);
  }, []);

  useEffect(() => {
    console.log(currState.shelf, currState.book);
  }, [currState.shelf, currState.book]);

  return (
    <div className="book" id={props.id}>
      <div className="book-top">
        <div
          className="book-cover"
          style={{
            width: 128,
            height: 193,

            backgroundImage: `url(${props.url})`,
          }}
        />
        <div className="book-shelf-changer">
          <select onChange={updatingBooks}>
            <option value="move" disabled>
              Move to...
            </option>
            <option value="wantToRead">Want to Read</option>
            <option value="currentlyReading">Currently Reading</option>
            <option value="read">Read</option>
            <option value="none">None</option>
          </select>
        </div>
      </div>
      <div className="book-title">{props.title}</div>
      <div className="book-authors">{props.authors}</div>
      <div></div>
    </div>
  );
}
export default Book;