0

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.

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 de la 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();
1
  • Ok, no se renderiza de nuevo el componente cuando cambias la URL. Mirando por encima tu código ¿sólo llamas a getInfo() dentro de componentDidMount()? Este método sólo se llama al montar el componente, ¿Se esta montando con cada cambio de URL? Me parece que no, porque llamas al render al cambiar de URL, luego ya no se va a ejecutar de nuevo y tu información no cambia. Cambia el punto en el que traes la información. Ciclo de vida de un componente React: projects.wojtekmaj.pl/react-lifecycle-methods-diagram
    – Orici
    Commented el 27 mar. 2020 a las 9:00

2 respuestas 2

0

Si la información la obtienes en un useEffect puedes hacer un estado que se ocupe de volver a ejecutar ese useEffect cuando tú quieras, te dejo un ejemplo.

import React, { useState, useEffect} from 'react'

export default function App() {
  const [users, setUser] = useState(null);
  const [reloadUsers, setReloadUsers] = useState(false)


  useEffect(() => {
    setUser(getUsers());
    setReloadUsers(false)
  }, [reloadUsers])

  return (
    <div>
      ...Code
    </div>
  )
}

Ahora solo tienes que ejecutar el setReloadUsers(true); cuando quieras volver a pedir los datos de los usuarios.

0

No hay forma de saber que es lo que quieres obtener en esas dos rutas

<Route path="/get_nouns" render={(props)=> <GetWords {...props}/>} />
<Route path="/get_verbs" render={(props)=> <GetWords {...props}/>} />

Ya que no envias ningun parámetro para diferenciar uno del otro la unica es leer la url lo cual es poco practico debes crear una sola ruta al comoponente y las variaciones deben ser parametros

asi

<Route path="/getdata/:tipo" render={(props)=> <GetWords {...props}/>} />

y en tu comoponente recibir ese parametro que se supone que es "get_nouns" o "get_verbs"

const GetWords = ({ computedMatch: { params } }) => {
  let { tipo } = params;

}

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.