J'ai une application comme celle-ci :

function App() {
return (
    <Router>
        <OpNavbar/>
        <Route exact={true} path="/" render={() => (
            <h1>This is the welcome page!</h1>
        )}/>
        <Route path="/([a-z]{3,4})/([a-z]+)list" component={OpTable}/>
    </Router>
    );
}

Si je suis dans "/" et que je change de chemin en cliquant sur un lien vers par exemple "/pfm/examplelist" et vice-versa, le composant respectif est rendu sans aucun problème. Cependant, si je suis dans "/pfm/examplelist" et que je passe à "/pfm/anotherlist", l'URL change mais mon composant ne sera pas rendu à nouveau. Je suppose que c'est parce que les anciens et les nouveaux chemins correspondent à mon regex? Comment rendre mon composant à nouveau à chaque changement d'URL ?

Voici une version allégée de mon composant Table :

function OpTable(props) {
    const [apiData, setData] = useState([]);
    const [columns, setColumns] = useState([{dataField: "Dummy", text: "Loading, Please Wait..."}]);

    useEffect(() => {
        axios.get(props.match.url)
        .then(response => {
            let res_data = response.data;
            setData(res_data.data);
            setColumns(res_data.columns);
        })
        .catch(error => {
            console.log(error);
        })
    }, [])

    return (
        <BootstrapTable
            keyField="id"
            data={ apiData }
            columns={ columns }
        />
    );
}
0
dvj 4 févr. 2020 à 18:41

1 réponse

Meilleure réponse

C'est le cas lorsque l'URL suivante appelle le même composant. Si vous souhaitez effectuer un nouveau rendu, l'un des moyens consiste à suivre votre chemin (url) dans useEffect.

 useEffect(() => {
        axios.get(props.match.url)
        .then(response => {
            let res_data = response.data;
            setData(res_data.data);
            setColumns(res_data.columns);
        })
        .catch(error => {
            console.log(error);
        })
    }, [props.location.pathname])

Je ne suis pas un utilisateur régulier de hooks (je me trompe peut-être avec la syntaxe). Mais la logique est d'appeler api (chaque fois qu'il y a un changement d'URL) requis pour ce composant qui à son tour définit l'état et le rendu se produit

1
Dipesh KC 4 févr. 2020 à 15:54