javascript - tag - select form react
El mapa Reactjs funciona pero para cada uno no (4)
Básicamente map
devuelve una matriz mientras forEach
no devuelve nada,
en el contexto jsx / reaccionar , debe devolver una lista de componentes / etiquetas de nodos que el analizador transformará en nodos tanto en la dom real como en la virtual;
trabajando por efectos secundarios como forEach no tendrá nada que analizar.
Estoy luchando por comprender la diferencia entre forEach y el mapa. En la siguiente función de renderizado, si ''forEach'' se reemplaza por ''map'' funciona. No entiendo por qué no funciona con ''forEach''. Ambos {item.id} y {item.text} están presentes con ambos métodos. Entonces, ¿por qué los accesorios para ''TodoItem'' no se establecen cuando se utiliza ''forEach''?
render() {
return(
<ul>
{this.props.items.forEach(function(item) {
return (
<TodoItem id={item.id} text={item.text} />)
})}
</ul>
);
}
Entonces, si ''para cada cosa'' no devuelve nada, ¿cómo es que esto tampoco funciona?
render() {
return(
<ul>
{this.props.items.forEach(function(item) {
<TodoItem id={item.id} text={item.text} />
})}
</ul>
);
}
Como @Nenad Vracar mencionó que el map
realmente devolverá cosas. Si quería hacer algo con otra matriz, objeto o fragmento de código, podría usar forEach
. Pero ya que quieres devolver algo que termina mostrándose en el DOM. Usa el map
Además, no olvide return
lo que está mapeando. Es un error común porque no necesita usar la devolución de forEach
.
La función de map
devuelve una matriz de elementos y para forEach
ciclo simplemente sobre ellos. Para hacer que este código funcione, use:
render() {
const items = [];
this.props.items.forEach(item => items.push(
<li>
<TodoItem id={item.id} key={item.id} text={item.text} />
</li>
))
return(
<ul>
{items}
</ul>
);
}
Pruebe este sencillo ejemplo para comprender por qué forEach no funciona en este contexto:
[1,2,3].forEach((n)=> n); => returns undefined
[1,2,3].map((n)=> n); => returns [1,2,3]