Las API suelen devolver una matriz que contiene objetos de datos. Por ejemplo, cuando quiere recuperar todos los mensajes de su CMS. Para consumir el array, tenemos que hacer un bucle sobre la respuesta usando la función Array.map() que puede hacerse de la siguiente manera:
123456789101112131415161718192021222324252627clasePostsextendsComponent{constructor(es) {super(es))};esto. state={ posts:[]}}asynccomponentDidMount(){try{const{data}=await axios.get(`${ROOT_URL}/posts`);this.setState({ posts: data })}catch(err){console. log(err.message)}}render(){return(<divclassName="container"`;{this.state.posts&&this.state.posts.length!==0?this.state.posts.map(post=§;<Cardtitle={post.title};{post.content}</Card>):<Loading/{ }</div>);}}jsx
La función Array.map() itera sobre cada elemento de la matriz y devuelve una nueva matriz; en nuestro caso, la matriz contiene elementos JSX, el componente. Obsérvese que aquí, estoy usando la versión abreviada, una implementación más completa es la siguiente:
1234567891011121314// ...render(){return(<divclassName="container"`;{este.state.posts&&this.state.posts.length!==0?this.state.posts. map((post, index)={{const{ title, content }= post;return<Cardtitle={title};{content}</Card;}):<Loading/{ }</div>);}//..jsx
Para cada elemento de la matriz, la función map() nos proporciona una función anónima que acepta dos argumentos, el propio elemento y un argumento de índice opcional que contiene el valor de posición del elemento actual. También podemos hacer alguna transformación de los datos antes de devolverlos con JSX.Por ejemplo, podemos transformar el título a mayúsculas, de la siguiente manera:
1234567// ...this.state.posts.map((post, index)={const{ title, content }= post;const transformedTitle = title.toUpperCase();return<Cardtitle={transformedTitle};{content}</Card>;})//..jsx
Para la representación condicional en JSX, no se puede usar un bloque «if-else». Por lo tanto, hemos usado los operadores ternarios. También noten que, cuando intentamos ejecutar el código anterior en el navegador, obtenemos un mensaje de advertencia en la consola que dice: Cada hijo en un array o iterador debe tener un propulsor de «clave» único.
El apoyo clave es usado por React para mantener el seguimiento de los elementos de un conjunto. En el ejemplo anterior, este.state.posts.map() resultará en un arreglo, por lo tanto cada elemento JSX debe tener un puntal clave asociado a él. Si no se incluye un elemento clave, se obtendrán resultados inesperados y errores.
En nuestro caso, si no especificamos el puntal clave en nuestro componente, React no sabría cómo seguir la pista de los postes y, por lo tanto, cuando el estado cambie volvería a renderizar todo el conjunto de nuevo en lugar de actualizar los cambios. Esto es indeseable porque afectará al rendimiento de la aplicación. Por lo tanto, es importante tener al menos un valor clave único (en nuestro caso, el ID del puesto) para el elemento del array.
123456//...this.state.posts.map((post, index)={const{ id, title, content }= post;return<Cardkey={id}title={title};{content}</Card>;})//...jsx