Реакция: удаление axios поддельного API не работает

Я практикую REST API, используя один сайт Fake API. Для интерфейса я использую React. Я успешно ввожу адрес электронной почты и пароль, используя фальшивый 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;

reactjs axios http-delete
person juha    schedule 23.04.2020    source источник

Ответы (1)


arrow_upward
0
arrow_downward

В реквизите 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>;
person Ajin Kabeer    schedule 23.04.2020
comment
Спасибо чувак! Результаты отображаются на консоли, но профиль пользователя не исчезает. - person juha; 23.04.2020
comment
Пожалуйста. Да, я тоже это заметил. Несмотря на то, что ответ API правильный, они не удаляют пользователя. - person Ajin Kabeer; 23.04.2020
comment
Есть ли решение? Я нашел один репозиторий GitHub, где пользователь может удалить данные, и профиль пользователя также может исчезнуть. . - person juha; 23.04.2020
comment
Позвольте мне проверить репо. - person Ajin Kabeer; 23.04.2020