Skip to main content
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Mejorar formato y redacción para que el post se vea mas ligero y sea mas rápido de leer
Origen Enlace

¿Como volver a renderizar el mismo componenetecomponente con nueva información en ReactjsReact.js?

Estoy tratando deQuiero volver a renderizar un componente pero con diferente información, pero no funciona. Cuando vengo desde cualquier parte de la aplicación al componente que me muestra las palabras, me aparecen los valores, ej.

Por ejemplo: siSi al menú le doy el "Nouns", me muestra las n3n3, n4n4 que pertenecen a la colección nounsnouns en mongodb, pero si le doy click en "Verbs", cambia la url pero no los valores en el componente. 

Si refresco la página con la url, con get_verbs se muestran v3, v4 que pertenecen a la coleccipon "verbs"colección verbs. 

Para mostrar los "nouns"nouns y "verbs"verbs hago uso del mismo componente.

Dejo código de la barra de navegación haciendo uso de LinkLink, de mi SwitchSwitch en AppApp y de como en el componente para mostrar las palabras, debería renderizar las palabras delade la colección correcta. Donde dependiendo del valor de la urlurl hace la consulta a la API.

Código del RouterRouter

¿Como volver a renderizar el mismo componenete con nueva información en Reactjs?

Estoy tratando de volver a renderizar un componente pero con diferente información, pero no funciona. Cuando vengo desde cualquier parte de la aplicación al componente que me muestra las palabras me aparecen los valores, ej: si al menú le doy el "Nouns", me muestra las n3, n4 que pertenecen a la colección nouns en mongodb pero si le doy click en "Verbs", cambia la url pero no los valores en el componente. Si refresco la página con la url con get_verbs se muestran v3, v4 que pertenecen a la coleccipon "verbs". Para mostrar los "nouns" y "verbs" hago uso del mismo componente.

Dejo código de la barra de navegación haciendo uso de Link, de mi Switch en App y de como en el componente para mostrar las palabras, debería renderizar las palabras dela colección correcta. Donde dependiendo del valor de la url hace la consulta a la API.

Código del Router

¿Como volver a renderizar el mismo componente con nueva información en React.js?

Quiero volver a renderizar un componente pero con diferente información, pero no funciona. Cuando vengo desde cualquier parte de la aplicación al componente que me muestra las palabras, me aparecen los valores.

Por ejemplo: Si al menú le doy el "Nouns", me muestra las n3, n4 que pertenecen a la colección nouns en mongodb, pero si le doy click en "Verbs", cambia la url pero no los valores en el componente. 

Si refresco la página con la url, con get_verbs se muestran v3, v4 que pertenecen a la colección verbs. 

Para mostrar los nouns y verbs hago uso del mismo componente.

Dejo código de la barra de navegación haciendo uso de Link, de mi Switch en App y de como en el componente para mostrar las palabras debería renderizar las palabras de la colección correcta. Donde dependiendo del valor de la url hace la consulta a la API.

Código del Router

Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
Relanzada por el usuario Comunidad
se añadieron 20 caracteres en el cuerpo
Origen Enlace

Estoy tratando de volver a renderizar un componente pero con diferente información, pero no funciona. Cuando vengo desde cualquier parte de la aplicación al componente que me muestra las palabras me aparecen los valores, ej: si al menú le doy el "Nouns", me muestra las n3, n4 que pertenecen a la colección nouns en mongodb pero si le doy click en "Verbs", cambia la url pero no los valorescambia la url pero no los valores en el componente. Si refresco la página con la url con get_verbs se muestran v3, v4 que pertenecen a la coleccipon "verbs". Para mostrar los "nouns" y "verbs" hago uso del mismo componente.

Estoy tratando de volver a renderizar un componente pero con diferente información, pero no funciona. Cuando vengo desde cualquier parte de la aplicación al componente que me muestra las palabras me aparecen los valores, ej: si al menú le doy el "Nouns", me muestra las n3, n4 que pertenecen a la colección nouns en mongodb pero si le doy click en "Verbs", cambia la url pero no los valores. Si refresco la página con la url con get_verbs se muestran v3, v4 que pertenecen a la coleccipon "verbs". Para mostrar los "nouns" y "verbs" hago uso del mismo componente.

Estoy tratando de volver a renderizar un componente pero con diferente información, pero no funciona. Cuando vengo desde cualquier parte de la aplicación al componente que me muestra las palabras me aparecen los valores, ej: si al menú le doy el "Nouns", me muestra las n3, n4 que pertenecen a la colección nouns en mongodb pero si le doy click en "Verbs", cambia la url pero no los valores en el componente. Si refresco la página con la url con get_verbs se muestran v3, v4 que pertenecen a la coleccipon "verbs". Para mostrar los "nouns" y "verbs" hago uso del mismo componente.

Origen Enlace

¿Como volver a renderizar el mismo componenete con nueva información en Reactjs?

Estoy tratando de volver a renderizar un componente pero con diferente información, pero no funciona. Cuando vengo desde cualquier parte de la aplicación al componente que me muestra las palabras me aparecen los valores, ej: si al menú le doy el "Nouns", me muestra las n3, n4 que pertenecen a la colección nouns en mongodb pero si le doy click en "Verbs", cambia la url pero no los valores. Si refresco la página con la url con get_verbs se muestran v3, v4 que pertenecen a la coleccipon "verbs". Para mostrar los "nouns" y "verbs" hago uso del mismo componente.

introducir la descripción de la imagen aquí

introducir la descripción de la imagen aquí

Dejo código de la barra de navegación haciendo uso de Link, de mi Switch en App y de como en el componente para mostrar las palabras, debería renderizar las palabras dela colección correcta. Donde dependiendo del valor de la url hace la consulta a la API.

<ul className="navbar-nav ml-auto">
                        <li className="nav-item dropdown">
                            <Link className="nav-link dropdown-toggle" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"
                                to="/">Know all the words</Link>
                            <div className="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
                                <Link className="dropdown-item" to="/get_nouns">Nouns</Link>
                                <Link className="dropdown-item" to="/get_verbs">Verbs</Link>
                            </div>
                        </li>
                        <li className="nav-item">
                            <Link className="nav-link" to="/new_word">Insert new word</Link>
                        </li>
                    </ul>

Código del Router

render() {
return (
  <div>
    <Navigation />
    <div className="container">
      <Switch>
        <Route path="/new_word" render={()=> <InsertWord/>} />
        {/* Showing all the words by its type*/}
        <Route path="/get_nouns" render={(props)=> <GetWords {...props}/>} />
        <Route path="/get_verbs" render={(props)=> <GetWords {...props}/>} />
        <Route path="/edit_words/:id" render={(props)=> <EditWords {...props}/>} />
        <Route path="/" render={() => <Play/> } default/>
      </Switch>
    </div>
  </div>
);

}

Funciones del componente a renderizar:

defineKindOfWord =  async(kind) => {
    try {
        if (kind === "/get_nouns") return await axios.get(baseURL + '/words/noun');
        if (kind === "/get_verbs") return await axios.get(baseURL + '/words/verb');
    } catch (error) {
        console.log(error);
    }
}
getInfo = async () => {
    console.log(this.props.match.path);
    const getting = await this.defineKindOfWord(this.props.match.path)
    //const getting = await axios.get(baseURL + '/words/noun');
    console.log(getting.data.result);
    this.setState({ info: getting.data.result });
    //console.log(this.state.info);
}
componentDidMount() {
    console.log(this.props);
    this.getInfo();