Реагирует: поддельный топор API ios удаление не работает - PullRequest
Новая
       62

Реагирует: поддельный топор API ios удаление не работает

0 голосов
/ 23 апреля 2020

Я практикую REST API, используя один поддельный API сайт. Для фронт-энда я использую React. Я успешно выполнил вход в систему по электронной почте и паролю, используя логин Fake API и перенаправил на список пользователей, где я получил данные из Fake API и показал имя пользователя, изображение. Я использовал кнопку удаления, где я могу удалить пользователя. Я использовал метод удаления Ax ios, но кнопка ничего не делает.

Это компонент 

 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;

1 Ответ

0 голосов
/ 23 апреля 2020

В onClick вашей кнопке delete вы должны передать 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>;
...