反应：伪造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

 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>;