Recibo un error, no puedo llamar a setState en un componente que aún no está montado. Extrañamente, el video de Udemy que estoy siguiendo no recibe este error. Traté de verificar si esto se debe a un problema de enrutamiento v5 y v6, pero no encontré soluciones. Lo que estoy tratando de hacer aquí es obtener datos de usuario específicos cuando hago clic en un nombre de perfil o busco un nombre de usuario. Vista actual Pero los resultados no se muestran para cada llamada this.state
import React,{Component} from "react"; import withRouter from '../withRouter'; import Repose from "./Repose"; class Specific extends Component{ constructor(props){ super(props); this.state ={ user:[]}; const FetchUser = async(user)=>{ const API_Call=await fetch(`https://api.github.com/search/users/${user}`) const data= await API_Call.json(); return {data} } FetchUser(props.params.login).then((res)=>{ if(!res.data.message){ this.setState({user:res.data}) } }) } Data () { if(this.state.user.login===0){ return(<i>No user with given username{this.props.params.login}</i>) }else { return( <center> <section className="Specific"> <div className="main" id="main"> <div className="container"> <div className="row"> <div className="col-lg-12 col-md-12"> <div className="SUsersData"> <i className="fas fa-heart NotFave"></i><h4>Name :<i className="bl">{this.state.user.name}</i> </h4> <img src={this.state.user.avatar_url}alt="" /> <h4>followers :<i className="bl"> {this.state.user.followers} </i> </h4> <h4>location :<i className="bl"> {this.state.user.location} </i> </h4> <Repose user={this.props.params.login}/> </div> </div> </div> </div> </div> </section> </center> ); } } render(){ return( <React.Fragment> {this.Data()} </React.Fragment> ); } } export default withRouter(Specific);Se llama al constructor antes de que se monte el componente y, por lo tanto, puede terminar llamando a setState antes de tiempo. En general, no debe realizar la obtención de datos en el constructor de un componente de reacción. Vea más aquí: https://stackoverflow.com/a/55182747/5574617
Le recomendaría refactorizar su fetchUser en el método de ciclo de vida del componentDidMount() donde puede desde allí llamar de manera segura a setState
class Specific extends Component{ constructor(props){ super(props); this.state ={ user:[]} } async componendDidMount() { const FetchUser = async(user)=>{ const API_Call=await fetch(`https://api.github.com/search/users/${user}`) const data= await API_Call.json(); return {data} } FetchUser(this.props.params.login).then((res)=>{ if(!res.data.message){ this.setState({user:res.data}) } }) }También está el hecho de que los componentes basados en clases han dejado de usarse en favor de los componentes funcionales y los ganchos que su componente implementado con el nuevo estilo serían:
const Specific = ()=>{ const { login } = props.params; //grab props const FetchUser = async(user)=>{ const API_Call=await fetch(`https://api.github.com/search/users/${user}`) const data= await API_Call.json(); return {data} } //this function should really be in a different file const [user, setUser] = useState([]); //declare the state and function used to edit it useEffect(()=>{ let user = FectchUser(login); //this function doesnt return a Promise, so u cant use "then" setUser(user); }, [login]) return ( <> ...rest of jsx </>); } <script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>