Esto debería ser sencillo, pero no puedo ponerme a trabajar incluso si probé diferentes enfoques y también me referí a las soluciones existentes de stackoverflow. Soy nuevo en el trabajo frontend. Tengo una aplicación de reacción (usando mecanografiado) y estoy usando componentes antd. tengo el siguiente objeto
class User { locations: Location[]; } class Location { name:string; }Quiero representar los nombres de las ubicaciones en las opciones seleccionadas. Lo intenté
<Select id="location" placeholder="Location" > {user.locations.map((loc) => { console.log('got -> ' + loc.name); <Option value={loc.name}>{loc.name}</Option>; })} </Select>Obtengo el registro de consola esperado, pero no aparece nada (lista de opciones vacía) y no hay ningún error. Cómo hacer que esto funcione
No está devolviendo nada de su función de mapa, por lo que solo se está ejecutando y devolviendo el vacío. Dado que no se devuelve ningún componente, no se procesa ninguno. Si tiene varias líneas de código en una función de flecha, debe usar un retorno explícito. Para citar a MDN, (arrow functions do not magically guess what or when you want to "return")
https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions