Resumen del problema
Considere una barra de búsqueda <SearchBar/> (donde escribe diferentes especialidades universitarias) y un menú <Dropdown/> (un menú desplegable que muestra algunos detalles sobre una especialidad, es decir, "Acerca de Ciencias de la Computación > Profesores de Ciencias de la Computación", "Clasificaciones de Ciencias de la Computación > Mejores Cursos de Informática", etc.). Ingreso una palabra en la barra de búsqueda, luego hago clic en enviar. La información en el menú desplegable debe cambiar según lo que envíe el usuario. La información que va en el menú desplegable se obtiene de una colección mongo
Dentro de un componente React, tengo la siguiente función . Esta función se llama cuando el usuario hace clic en enviar .
Espero que la variable major se actualice una vez que se llame a la función anterior (es decir, cuando el usuario haga clic en enviar)
El menú desplegable se devuelve como <Dropdown dropdown_information={major.informationPiece1}/> , donde major.informationPieces1 es una lista de objetos
La definición del componente Dropdown se ve así:
const Dropdown = ({informationPieces1}) => { return ( <> <ul> {informationPiece1.map((piece, index) => { return ( <h1 key={index}> {piece.name} <h1/> ) })} </ul> </> ) }informationPiece1 en informationPiece1.map((piece, index) => ... aparece como indefinido. Obtengo Uncaught TypeError: Cannot read properties of undefined (reading 'map')console.log(informationPieces1) dentro de la definición del componente Dropdown React, veo la matriz en la consola correctamente.Creo que este es un problema de React. Creo que esto puede estar relacionado con un uso incorrecto de los accesorios de React por mi parte. ¿Qué pasos me recomendaría seguir para verificar si esto es cierto?
Está llamando al componente Dropdown con dropdown_information como accesorio y espera informationPieces1 en el componente. Entonces, o llama al componente con la informationPieces1 de apoyoPiezas1 o usa el apoyo dropdown_information dentro del componente
Voy a aclarar:
const Dropdown = ({informationPieces1}) => { // if you define the component like this the you must call it: <Dropdown informationPieces1={}/> /////////////////////////// // If you call the component like this: <Dropdown dropdown_information={}/> //then you must write the definition as: const Dropdown = ({dropdown_information}) => {Los nombres de sus accesorios deben coincidir tanto en la definición como en la llamada.