React：Fake api 的 axios 删除不起作用

Question

我正在使用一个 Fake API 站点来练习 REST API。对于前端，我使用的是 React。我使用Fake API 的登录名成功登录了电子邮件和密码并重定向到列表用户，我从Fake API 获取数据并显示用户名、图像。我使用删除按钮可以删除用户。我使用了 Axios 删除方法，但按钮没有做任何事情。

这是组件

 import React, { useState, useEffect } from "react";
    import axios from "axios";
    import { NavLink } from "react-router-dom";

    function Users() {
      const [state, setState] = useState([]);

      useEffect(() => {
        fetchingData();
      }, []);

      const removeData = id => { //THIS IS WHERE I USED THE AXIOS DELETE METHOD
        axios
          .delete(`https://reqres.in/api/users/${id}`)
          .then(res => console.log(res))
          .catch(err => console.log(err));
      };

      const fetchingData = () => {
        axios
          .get("https://reqres.in/api/users")
          .then(response => {
            setState(response.data.data);
          })
          .catch(err => console.log(err));
      };
      return (
        <div>
          <div className="col s12 m7">
            <h2 className="header">Users</h2>
            {state.map(userlist => {
              return (
                <div className="card horizontal" key={userlist.id}>
                  <div className="card-image">
                    <img src={userlist.avatar} alt="images" />
                  </div>
                  <div className="card-stacked">
                    <div className="card-content">
                      <p>
                        Name: {userlist.first_name} {userlist.last_name}
                      </p>
                      <p>Email: {userlist.email}</p>
                    </div>
                    <div className="card-action">
                      <button
                        className="btn delete"
                        onClick={() => removeData !== userlist.id} // THIS IS WHERE I USED THE DELETE LOGIC. 
                      >
                        Delete
                      </button>

                      <NavLink
                        exact
                        to={`/api/users/${userlist.id}`}
                        className="btn edit"
                      >
                        Edit
                      </NavLink>
                    </div>
                  </div>
                </div>
              );
            })}
          </div>
        </div>
      );
    }

    export default Users;

Answer 1

在您的delete 按钮的onClick 属性中，您应该将id 作为参数传递。

 const removeData = async id => {
        console.log("ID", id);
        try {
          const response = await axios.delete(`https://reqres.in/api/users/${id}`);
          console.log(response);
          fetchingData();
        } catch (error) {
          console.log(error);
        }
      };

<button
  className="btn delete"
  onClick={() => removeData(userlist.id)} // THIS IS WHERE I USED THE DELETE LOGIC.
>
  Delete
</button>;