React组件传值问题：如何将book._id传入EditBook组件

你可以通过以下步骤把book._id传递给EditBook组件：

1. 添加状态存储当前编辑书籍的ID
   在组件里新增状态变量，用来保存点击的书籍ID：

   const [currentBookId, setCurrentBookId] = useState(null);
   const [edit, setEdit] = useState(false); // 假设你用这个状态控制编辑表单的显示/隐藏
   

2. 修改editBook函数，接收并保存书籍ID
   更新editBook函数，让它接收bookId参数，同时设置状态显示表单并存储目标书籍ID：

   const editBook = (bookId) => {
     setCurrentBookId(bookId);
     setEdit(true); // 触发编辑表单显示
   };
   

3. 点击编辑图标时传入book._id
   在AiOutlineEdit的点击事件里，把当前循环项的book._id传给editBook函数：

   {
     books.map((book) => {
       return <div key={book._id}>
         <AiOutlineEdit onClick={() => editBook(book._id)}></AiOutlineEdit>
       </div>
     })
   }
   

4. 把书籍ID作为props传给EditBook组件
   现在可以将存储好的currentBookId作为props传递给EditBook，后续发起PUT请求时就能直接使用这个ID：

   { edit && <EditBook editBook={editBook} bookId={currentBookId}></EditBook> }
   

在EditBook组件内部，你就能通过props.bookId获取到目标书籍的ID，用来构造PUT请求的接口地址（比如/api/books/${props.bookId}）完成数据更新。

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