javascript - 使用 Axios 和 ReactJS 从 API 中删除数据

Question

我正在从 jsonplaceholder API 获取数据到我的状态中。如何使用 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

这里需要修改一些内容 - 首先，考虑到您的 axios 请求需要将 user.id 传递给 deleteContact() 函数，用户 ID 作为请求 URL 的一部分。这通常意味着将“删除”按钮移动到 map() 渲染回调中，以便每个用户 ID 都可以通过按钮单击处理程序传递:

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) 

箭头函数提供了一种调用绑定(bind)到当前组件实例的类方法的便捷方法。这对于确保像 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 });
    })
}

希望有帮助!

更新

另一条注释；您的代码期望 https://jsonplaceholder.typicode.com/ 上的 API 根据文档在 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 does not actually remove data from the server这意味着删除操作看起来没有效果。