admin管理员组文章数量:1334826
I am fetching data from the jsonplaceholder API into my state. How can I remove the data with the deleteContact()
method? My greatest struggle is how to get the deleteContact()
method right.
Is this approach wrong?
class RemoveFromAPI extends Component {
state = {
users: []
}
ponentDidMount() {
axios.get(``)
.then(res => {
const users = res.data;
this.setState({ users });
})
}
deleteContact () {
axios.delete(`/${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=".6.3/umd/react.production.min.js"></script>
<script src=".6.3/umd/react-dom.production.min.js"></script>
I am fetching data from the jsonplaceholder API into my state. How can I remove the data with the deleteContact()
method? My greatest struggle is how to get the deleteContact()
method right.
Is this approach wrong?
class RemoveFromAPI extends Component {
state = {
users: []
}
ponentDidMount() {
axios.get(`https://jsonplaceholder.typicode./users`)
.then(res => {
const users = res.data;
this.setState({ users });
})
}
deleteContact () {
axios.delete(`https://jsonplaceholder.typicode./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./ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare./ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
Share
edited Dec 30, 2018 at 23:02
Dacre Denny
30.4k5 gold badges51 silver badges66 bronze badges
asked Dec 30, 2018 at 22:37
brunohgbrunohg
371 gold badge1 silver badge5 bronze badges
1
- Wele to Stack Overflow. Do you mean that you want to remove the user from the state? – Mikkel Commented Dec 30, 2018 at 22:54
1 Answer
Reset to default 5A few things to revise here - first, it seems you need to pass the user.id
to the deleteContact()
function, given that your axios request requires the user id as part of the request URL. This typically means moving the "Remove" button into the map()
render callback so that each user id can be passed through the buttons click handler:
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>);
}
Also, note the use of the "arrow function" passed on onClick
:
() => this.deleteContact(user.id)
Arrow functions provide a convenient way to call a class methods that are bound to the current ponent instance. This is important to ensure methods like setState()
work as expected from inside the class method being called.
Finally, the deleteContact()
method itself needs some minor revisions. Ensure the id
parameter is declared as a function argument and also remove the ;
following your axios.delete()
to avoid a syntax error, like so:
deleteContact (id) { // <-- declare id parameter
axios.delete(`https://jsonplaceholder.typicode./users/${id}`) // <-- remove ;
.then(res => {
const users = res.data;
this.setState({ users });
})
}
Hope that helps!
Update
Another note; your code is expecting the API at https://jsonplaceholder.typicode./
to return list of items after a DELETE
request according to the documentation this doesnt seem to be the API's behavior. One way to address this would be to update deleteContact()
to first issue the DELETE
request, followed by a GET
request like so:
deleteContact (id) {
// Issue DELETE request
axios.delete(`https://jsonplaceholder.typicode./users/${id}`)
.then(() => {
// Issue GET request after item deleted to get updated list
// that excludes user of id
return axios.get(`https://jsonplaceholder.typicode./users`)
})
.then(res => {
// Update users in state as per-usual
const users = res.data;
this.setState({ users });
})
}
Note also, this placeholder API does not actually remove data from the server which will mean the delete operation will appear to have no effect.
本文标签: javascriptDelete data from API with Axios and ReactJSStack Overflow
版权声明:本文标题:javascript - Delete data from API with Axios and ReactJS - Stack Overflow 内容由网友自发贡献,该文观点仅代表作者本人, 转载请联系作者并注明出处:http://www.betaflare.com/web/1742265373a2443290.html, 本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容,一经查实,本站将立刻删除。
发表评论