Entonces, esta es la primera vez que uso Hooks y también tenga en cuenta que estoy aprendiendo, por favor. Actualmente estoy trabajando en un proyecto grupal en el que solo se me permitió usar React Hooks, estamos trabajando en un proyecto front-end. Haré todo lo posible para detallar todo. Tenemos un componente de clase de aplicación donde mantenemos el estado predeterminado currentProduct: '' . Usamos componentDidMount() para obtener datos de una API y luego actualizamos el estado para que sea, de forma predeterminada, el primer producto de una matriz de objetos.
Creé un componente separado llamado RelatedItems , donde estoy usando ganchos.
Así es como se ve mi componente:
import React, { useState, useEffect } from 'react'; const RelatedItems = (props) => { const [items, setItems] = useState(props.currentProduct); useEffect(() => { setItems(props.currentProduct); }, [items]) return ( <div className="Related-Items"> <h1>Related Items</h1> <h3>{items}</h3> </div> ) } export default RelatedItems; Intenté usar useEffect mirando los Documentos y algunos otros artículos en StackOverflow, pero sigo manteniendo el estado de mis elementos como una cadena vacía. Supuse que estaba sucediendo porque, en esencia componentDidMount es una función asíncrona.
Así es como se ve el componente de la aplicación:
class App extends React.Component { constructor(props) { super(props); this.state = { currentProduct: '' } this.handleClick = this.handleClick.bind(this); } handleClick(e, id) { e.preventDefault(); this.setState({ currentProduct: Number(id) }) } componentDidMount() { axios.get('/sedna/products') .then((response) => { this.setState({ currentProduct: response.data[0].id }) }) .catch((error) => { console.error(error); }) } render() { return ( <div> <h1>Hello Sedna</h1> <SearchBar handleClick={this.handleClick} /> <RelatedItems currentProduct={this.state.currentProduct} /> </div> ) } } export default App;Estoy procesando elementos en un H3 solo para probar que obtengo el estado adecuado, ¡cualquier comentario es bienvenido! Perdón por cualquier error gramatical
Si desea duplicar datos dentro del estado del componente, debe especificar props.currentProduct como una dependencia de enlace.
... useEffect(() => { setItems(props.currentProduct); }, [props.currentProduct]) ... Pero en el código que ha proporcionado, el componente RelatedItems no necesita un estado propio. En cualquier caso, se volverá a renderizar cuando cambie el accesorio.
const RelatedItems = (props) => { return ( <div className="Related-Items"> <h1>Related Items</h1> <h3>{props.currentProduct}</h3> </div> ) }Su código actual dará como resultado un bucle infinito si useEffect alguna vez se dispara porque useEffect cambia la dependencia.
En su lugar, desea que la dependencia sea la propiedad aprobada, de modo que cuando la propiedad cambie, useEffect se active y el estado se actualice de manera adecuada.
const RelatedItems = (props) => { const [items, setItems] = useState(props.currentProduct); useEffect(() => { setItems(props.currentProduct); }, [props.currentProduct]) return ( <div className="Related-Items"> <h1>Related Items</h1> <h3>{items}</h3> </div> ) } Sin embargo, tenga en cuenta que establecer el estado a partir de accesorios es un poco antipatrón porque fragmenta el estado para que ya no haya una única fuente de verdad. (Si cambia items en RelatedItems , el padre tendrá un valor diferente)
Por esta razón, es mejor que maneje la gestión del estado en el padre y pase los accesorios al hijo para que los represente.
const RelatedItems = (props) => { return ( <div className="Related-Items"> <h1>Related Items</h1> <h3>{props.currentProduct}</h3> </div> ) }