Как реализовать метод DELETE в ax ios и React? - PullRequest
Новая
       5

Как реализовать метод DELETE в ax ios и React?

1 голос
/ 26 января 2020

Я не могу реализовать кнопку удаления. У меня есть конечная точка API 'DELETE /.../ndomid}'. Иметь ApiService. js: 

deleteById(id) {
        return axios.delete(`${ACCOUNT_API_BASE_URL}/${id}`)
    }

и вот мой класс: 

class Account extends Component {
    constructor(props) {
        super(props);

        this.state = {
            item: {
                id: props.match.params.id,
                name: '',
                email: '',
                password: '',
                link: ''
            }
        };
        this.deleteById = this.deleteById.bind(this);
    }

    componentDidMount() {

        // eslint-disable-next-line
        if (this.state.item.id === -1) {
            return -1
        }

        ApiService.fetchAccountById(this.state.item.id)
            .then(response => this.setState({
                item: {
                    name: response.data.name,
                    email: response.data.email,
                    password: response.data.password,
                    link: response.data.link
                }
            }))
    }


    deleteById(id) {
        ApiService.deleteById(id)
            .then(res => console.log(res.data))
    }

    render() {
        return (
            <div>
                <h3>{this.state.item.name}</h3>
                <ul>
                    {this.state.item.id}
                    <li className={c.itemEmail}>Email: {this.state.item.email}</li>
                    <li>Password: {this.state.item.password}</li>
                    <li>Link: {this.state.item.link}</li>
                </ul>
                <button onClick={this.deleteById(this.state.item.id)}>Delete</button>

            </div>
        )
    }
}

Удаляет данные после запроса страницы (метод get), но не нажатием кнопки удаления.

Если я установлю this.deleteById на <button onClick= на, я получу: 'УДАЛИТЬ http://localhost: 8080 / api /.../ undefined 400'

Ответы [ 2 ]

2 голосов
/ 26 января 2020

Во-первых, вы удаляете свойство id из своего элемента в componentDidMount: 

ApiService.fetchAccountById(this.state.item.id)
            .then(response => this.setState({
                item: { // now item doesn't have id anymore
                    name: response.data.name,
                    email: response.data.email,
                    password: response.data.password,
                    link: response.data.link
                }
            }))

Так что оставьте свой id таким: 

ApiService.fetchAccountById(this.state.item.id)
                .then(response => this.setState({
                    item: {
                        id: this.state.item.id,
                        name: response.data.name,
                        email: response.data.email,
                        password: response.data.password,
                        link: response.data.link
                    }
                }))

Во-вторых, вы выполняя функцию вместо передачи функции onClick, измените значение onClick на: 

onClick={() => {this.deleteById(this.state.item.id)}}
0 голосов
/ 26 января 2020 
<button onClick={() => this.deleteById(this.state.item.id)}>Delete</button>
...