Удалить данные из API с помощью Axios и ReactJS

Question

Я загружаю данные из API jsonplaceholder в свое состояние.Как удалить данные методом deleteContact()?Моя самая большая борьба - как правильно выбрать метод deleteContact().

Это неправильный подход?

class RemoveFromAPI extends Component {

    state = {
        users: []

    }

    componentDidMount() {
        axios.get(`https://jsonplaceholder.typicode.com/users`)
            .then(res => {
                const users = res.data;
                this.setState({ users });
            })
    }

    deleteContact () {
        axios.delete(`https://jsonplaceholder.typicode.com/users/${id}`);
        .then(res => {
            const users = res.data;
            this.setState({ users });
        })

    }

    render() {

        const {users} = this.state

        return (
            <div>
                <ul>
                    { this.state.users.map(user => <li>{user.name}</li>)}
                </ul>

                <button
                    onClick={deleteContact}
                   >
                    Remove
                </button>

            </div>
        );
    }
}

RemoveFromAPI.propTypes = {};

export default RemoveFromAPI;

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

Несколько вещей, которые нужно здесь пересмотреть - во-первых, кажется, вам нужно передать user.id в функцию deleteContact(), учитывая, что ваш запрос axios требует, чтобы идентификатор пользователя был частью URL-адреса запроса.Обычно это означает перемещение кнопки «Удалить» в обратный вызов map(), чтобы каждый идентификатор пользователя можно было передать через обработчик нажатия кнопок:

render() {

    const {users} = this.state

    return (<div>
            <ul>
            { 
              this.state.users.map(user => (
              <li>{user.name}
                  <button onClick={ () => this.deleteContact(user.id) } >Remove</button>
              </li>))
            }
            </ul>
        </div>);
}

Также обратите внимание на использование «функции стрелки»передано onClick:

() => this.deleteContact(user.id) 

Функции стрелок предоставляют удобный способ вызова методов класса, которые связаны с текущим экземпляром компонента.Это важно для обеспечения того, чтобы такие методы, как setState(), работали, как и ожидалось, из вызываемого метода класса.

Наконец, сам метод deleteContact() нуждается в некоторых небольших ревизиях.Убедитесь, что параметр id объявлен как аргумент функции, а также удалите ; после вашего axios.delete(), чтобы избежать синтаксической ошибки, например:

deleteContact (id) { // <-- declare id parameter
    axios.delete(`https://jsonplaceholder.typicode.com/users/${id}`) // <-- remove ;
    .then(res => {
        const users = res.data;
        this.setState({ users });
    })
}

Надеюсь, это поможет!

Обновление

Еще одна заметка;Ваш код ожидает, что API на https://jsonplaceholder.typicode.com/ вернет список элементов после запроса DELETE в соответствии с документацией, это не похоже на поведение API.Один из способов решения этой проблемы - обновить deleteContact(), чтобы сначала выполнить запрос DELETE, а затем запрос GET, например, так:

deleteContact (id) {

    // Issue DELETE request
    axios.delete(`https://jsonplaceholder.typicode.com/users/${id}`)
    .then(() => {

        // Issue GET request after item deleted to get updated list
        // that excludes user of id
        return axios.get(`https://jsonplaceholder.typicode.com/users`)
    })
    .then(res => {

        // Update users in state as per-usual
        const users = res.data;
        this.setState({ users });
    })
}

Обратите внимание, этот API-заполнитель выполняетфактически не удаляет данные с сервера , что будет означать, что операция удаления не будет иметь никакого эффекта.