0
374
Vistas¿Cómo pasar un objeto a otro componente en reactJs?
Estoy tratando de averiguar cómo puedo agregar los artículos a la lista de vigilancia,
Los pasos que estoy tratando de llevar a cabo aquí son, cuando un usuario hace clic en el botón Agregar, los elementos deben agregarse a la página/componente de la lista de vigilancia que he creado.
Consulte la jerarquía del componente. Me gustaría mostrar los elementos agregados en la página de la lista de observación.
Por favor, vea el código que probé.
const [watchlist, setWatchlist] = useState ([]); const handleWatchlist = (movieData) => { const newList = [...watchlist, movieData] setWatchlist(newList) console.log(newList) } <Button className = {classes.cardButton}size = "small" onClick = { ()=> handleWatchlist(movie) }> Add </Button>Cuando trato de inspeccionar, el resultado es que muestra que los elementos se agregan en la consola también en el estado, pero no se pueden pasar al componente de la lista de observación. ¿Cómo puedo usar un accesorio para pasar este valor y mostrarlo en el componente de la lista de seguimiento? ¿O sus accesorios no son la forma correcta de pasar cualquier objeto a un componente?
El resultado en la consola es el siguiente.
Cualquier ayuda es muy apreciada. Encuentre el enlace al código completo a continuación
https://codesandbox.io/s/determinado-ruiseñor-m2mtn?file=/src/components/Products/Watchlist.jsx
Un millón de gracias
2 Respuestas
Responde la pregunta0
al revisar su código, cometió un error al pasar los accesorios. Actualmente estás haciendo esto:
const Watchlist = (watchlist) => {Primero debe desestructurar y obtener los accesorios haciendo esto:
const Watchlist = ({ watchlist }) => {0
Gracias por el apoyo, pero descubrí la solución usando dos enfoques y son
Que es la perforación de accesorios, es decir, es realizar la acción useState en mi App.js, que es mi página principal donde tengo el producto y el componente de lista de seguimiento.
Esta es la mejor manera que sugeriría que otras personas también usen usando contextAPI y useContext hooks . Una manera simple y fácil de pasar cualquier dato a cualquier parte de la aplicación.
Consulte el código completo con la solución de trabajo a continuación en codesandbox.
https://codesandbox.io/s/determinado-ruiseñor-m2mtn?file=/src/components/Productos
La aplicación de trabajo, donde puedo agregar los productos a la lista de observación.