En esta entrada, vamos a hacer que el ejemplo que hemos ido creando durante las entradas anteriores obtenga los posts de una API, en vez de que estén en el código hardcodeados. También, haremos que el formulario de creación se envíe a una API y que después se añada el post creado al listado y para eliminar lo mismo, que se haga una llamada a la API y se elimine el post del listado.
Antes de nada lo que vamos a hacer va a ser renombrar de content a body allí dónde se haga referencia, porque en la API que vamos a utilizar, la variable que tiene el contenido del post se llama body en vez de content.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 |
// src/components/PostItem.js ... <p>{this.props.post.body}</p> ... body: PropTypes.string.isRequired ... // src/components/PostForm.js ... <label htmlFor="body">Content</label> <textarea id="body" /> ... |
De momento solamente eso, porque en el componente PostList.js lo cambiaremos ahora.
Ahora, vamos hacer el listado. Para ello, debemos tener un estado ( state) para guardar los posts (ya lo tenemos de las entradas anteriores) y vamos a utilizar un método del ciclo de vida de un componente para que cuando cargue el componente nos haga una llamada a la API y nos rellene el estado con los posts.
|
1 2 3 4 5 6 7 8 9 10 11 12 |
class PostList extends React.Component { state = { posts: [] }; componentDidMount() { fetch("https://jsonplaceholder.typicode.com/posts") .then(response => response.json()) .then(posts => this.setState({ posts })); } ... } |
Con esto, si arrancas el servidor ( npm run start ) ya deberías ver los posts que nos devuelve la API.
Por cierto, la API que estamos utilizando es JSONPlanceholder que es una herramienta gratuita y open source creada con JSON Server por el mismo autor que Hotel que sirve para crear endpoints falsos para pruebas. Al ser open source, si quieres la puedes instalar en tu local. Yo voy a utilizar la opción online, no lo voy a instalar en mi local. Tiene una cosa interesante y es que cuando haces peticiones a la API que van a modificar el contenido, realmente no lo modifica, pero te devuelve como si lo hubiera modificado.
Ya tenemos el listado adaptado, ahora vamos a adaptar el formulario de creación de posts:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 |
... handleSubmit = event => { event.preventDefault(); const lastPost = this.state.posts.slice(-1).pop(); let newPostObj = { id: lastPost ? lastPost.id + 1 : 0, title: event.target.title.value, body: event.target.body.value }; fetch("https://jsonplaceholder.typicode.com/posts", { method: "POST", body: JSON.stringify(newPostObj), headers: { "Content-type": "application/json; charset=UTF-8" } }) .then(response => response.json()) .then(newPost => { const posts = [...this.state.posts, newPost]; this.setState({ posts: posts }); }); }; ... |
Básicamente, lo que se hace es crear el objeto del nuevo posts, se envía a la API mediante POST y si la respuesta es correcta se añade al listado de posts.
Y, por último, solamente queda eliminar:
|
1 2 3 4 5 6 7 8 9 10 |
... handleDelete = postToDelete => { fetch(`https://jsonplaceholder.typicode.com/posts/${postToDelete.id}`, { method: "DELETE" }).then(response => { let posts = this.state.posts.filter(post => post.id !== postToDelete.id); this.setState({ posts: posts }); }); }; ... |
Se pasa por parámetro en la URL el id del post que queremos eliminar y si la respuesta es correcta, se elimina del array de posts.
Código completo de la entrada: https://github.com/fullstackseriescom/aprende-reactjs/tree/master/06-consumir-api
Ejemplo en vivo de la entrada: https://repl.it/@vreaxe/Reactjs-Consumir-una-API
-
- https://developer.mozilla.org/es/docs/Web/API/Fetch_API/Utilizando_Fetch
- https://github.com/typicode/jsonplaceholder
Si hay cualquier tipo de error en el post o te surge cualquier duda, no dudes en ponerlo en los comentarios o enviarme un correo desde la página de contacto.
CONTACTAR