React图书馆管理系统deleteHandler删除功能无法正常运行求助

问题修复方案 #

核心问题梳理 #

1. 状态管理逻辑冲突
   你在LibraryBookList组件内单独声明了本地状态database，但实际渲染列表用的是父组件传入的props.database，删除操作修改的是和渲染无关的本地状态，自然不会触发页面更新。且本地database初始值为undefined，首次调用删除函数时会直接抛出语法错误。
   另外你的数据源实际存储在父组件BookData的loadedLibrarydata状态中，删除逻辑应该提升到BookData层实现，更新父组件状态后再通过props同步到子组件。

2. 删除按钮点击事件绑定错误
   LibraryBook.js中删除按钮的onClick写法错误：

// 错误写法：组件渲染时就会直接执行删除函数，不是点击触发
onClick={(props.onSelect(props.id))}

正确写法应该用箭头函数包裹，点击时才执行回调：

onClick={() => props.onSelect(props.id)}

3. 其他语法错误

• LibraryBook.js末尾导出错误，应该导出LibraryBook组件，你当前写的是export default LibraryBookList
• LibraryBookList中渲染列表时的key属性取值错误，你组装数据时把firebase的key存在了bookdata.id字段中，没有bookdata.key，应该改为key={bookdata.id}
• 当前删除仅修改了本地状态，没有同步调用firebase的删除接口，刷新页面后数据会恢复，需要补全接口请求。

修复后代码示例 #

1. BookData.js

把删除逻辑移到该组件，更新父组件的数据源，同时补全firebase删除请求：

import LibraryBookList from './LibraryBookList' // 注意根据你的项目路径调整引入

const BookData = (props) => {
  const [isLoading, setIsLoading] = useState(true);
  const [loadedLibrarydata, setLoadedLibrarydata] = useState([]); // 初始值设为空数组避免undefined错误

  // 删除逻辑移到父组件
  const deleteHandler = async (bookdataId) => {
    // 先调用firebase删除接口同步后端数据
    await fetch(`https://librarymanagement-70ab2-default-rtdb.firebaseio.com/database/${bookdataId}.json`, {
      method: 'DELETE'
    })
    // 再更新本地状态触发页面重渲染
    setLoadedLibrarydata(prev => prev.filter(book => book.id !== bookdataId))
  }

  useEffect(() => {
    setIsLoading(true);
    fetch(
      "https://librarymanagement-70ab2-default-rtdb.firebaseio.com/database.json"
    )
    .then((response) => {
      return response.json();
    })
    .then((data) => {
      const database = [];
      for (const key in data) {
        const bookdata = {
          id: key,
          ...data[key],
        };
        database.push(bookdata);
      }
      setIsLoading(false);
      setLoadedLibrarydata(database);
    });
  }, []);

  if (isLoading) {
    return (
      <section>
        <p>Loading.....</p>
      </section>
    );
  }

  return (
    <section>
      <h1>Book Data Base</h1>
      <table className={classes.table}>
        <thead>
          <tr className={classes.table_row}>
            <th className={classes.row_heading}>Serial No</th>
            <th className={classes.row_heading}>Pages</th>
            <th className={classes.row_heading}>Book Name</th>
            <th className={classes.row_heading}>Author</th>
            <th className={classes.row_heading}>Publisher</th>
          </tr>
        </thead>
      </table>
      {loadedLibrarydata && loadedLibrarydata.length && (
        // 把删除函数传给子组件
        <LibraryBookList database={loadedLibrarydata} onDelete={deleteHandler} />
      )}
    </section>
  );
};
export default BookData;

2. LibraryBookList.js

删掉本地的冗余状态，直接透传父组件传的删除函数：

import LibraryBook from './LibraryBook' // 注意根据你的项目路径调整引入

const LibraryBookList = (props) => {
  return (
    <ul className={classes.list}>
      {props.database.map((bookdata) => 
        (<LibraryBook
          key={bookdata.id} // 修复key取值
          id={bookdata.id}
          bookname={bookdata.bookName}
          author={bookdata.author}
          publisher={bookdata.publisher}
          pages={bookdata.pages}
          serialno={bookdata.serialNo}
          onSelect={props.onDelete} // 透传删除函数
        />
      ))}
    </ul>
  )
};
export default LibraryBookList

3. LibraryBook.js

修复点击事件和导出错误：

const LibraryBook = (props) => {
  return (
    <li>
      <table className={classes.table}>
        <tbody>
          <tr className={classes.table_row}>
            <td className={classes.row_data}>{props.serialno}</td>
            <td className={classes.row_data}>{props.pages}</td>
            <td className={classes.row_data}>{props.bookname}</td>
            <td className={classes.row_data}>{props.author}</td>
            <td className={classes.row_data}>{props.publisher}</td>
            <td>
              {/* 修复点击事件写法 */}
              <button className={classes.delete_btn} onClick={() => props.onSelect(props.id)}>
                Delete
              </button>
            </td>
          </tr>
        </tbody>
      </table>
    </li>
  )
}
// 修复导出错误
export default LibraryBook;

内容的提问来源于stack exchange，提问作者Nidhi