reactjs - 在 React 应用程序中删除项目时出现模态问题

Question

我正在学习 React，当我想用​​我的模态使用 axios DELETE 方法删除一个项目时遇到问题。具体来说，我想点击删除图标来获取要删除的 id，当在模式中按下确认时，它会向服务器发送一个请求。当我按下删除图标时，我得到了 id，但下一步似乎不是我所期望的。你能帮我解决这个问题吗？谢谢。这是我的代码

import React from 'react';
import axios from 'axios';

const UserItem = ({ user }) => {
  let userId = 0

  const getUserId = id => {
    userId = id;
  }

  const confirmDelete = () => {
   //axios({
   //  method: 'DELETE',
   //  url: `URL/${userId}`,
   //});
  console.log(userId);
  }

  return (
    <div className="row mx-0">
      <div className="cell">
        {user.name}
      </div>
      <div className="cell">
        {user.birthday}
      </div>
      <div className="cell">
        {user.email}
      </div>
      <div className="cell">
        {user.job}
      </div>
      <div className="cell">
        {user.company}
      </div>
      <div className="cell">
        {user.phone}
      </div>
      <div className="cell">
        <span title="Edit">
          <i className="far fa-edit"></i>
        </span>
        <span 
          title="Delete" 
          data-toggle="modal" 
          data-target="#exampleModal"
          onClick={() => getUserId(user.id)} 
        >
          <i className="far fa-trash-alt"></i>
        </span>
      </div>


  <div className="modal fade" id="exampleModal" tabIndex={-1} role="dialog" aria- 
   labelledby="exampleModalLabel" aria-hidden="true">
    <div className="modal-dialog" role="document">
      <div className="modal-content">
        <div className="modal-header">
          <h5 className="modal-title" id="exampleModalLabel">Delete user</h5>
          <button type="button" className="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">×</span>
          </button>
        </div>
        <div className="modal-body">
          Are you sure ?
        </div>
        <div className="modal-footer">
          <button type="button" className="btn btn-secondary" data-dismiss="modal">No</button>
          <button type="button" className="btn btn-primary" onClick={confirmDelete}>Yes</button>
        </div>
      </div>
    </div>
  </div>
    </div>
  );
};

export default UserItem;

标签： reactjs