javascript - tag - select form react

El mapa Reactjs funciona pero para cada uno no

Question

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>
);
}

Answer 1

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.

Answer 2

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 .

Answer 3

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>
);
}

Answer 4

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]