React：Fake api 的 axios delete 不起作用

Question

我正在使用一个 Fake API site. For front-end, I am using React. I successfully login the email and password by using Fake API's login and redirect to list users, where I fetched the data from Fake API 练习 REST 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>;

React：Fake api 的 axios delete 不起作用

React: Fake api's axios delete does not work

reactjs

axios

http-delete