React Router page address change but doesn't refresh

Question

I'm working on a Cryptocurrency project. When I'm on the home page and search for an item in the search box and click on the item I go to the second page and everything is ok. But on the second page When I search for an item and click on it URL changed but the page doesn't change and the data on-page is the same as before. I made a gif image you can understand better.

Github Source

this issue is related to two components searchbarLayout(search box) and coinsLayout(second page as I mentioned above) I added both components code.

I'm using for passing id and going to the second page.


    {name}

And I'm using useLocation() for getting Id and useParams() for getting the name of the coin.

  const location = useLocation();
  const { name } = useParams();
  const [id, setId] = useState(location.state?.id);

import React, { useState, useEffect } from "react";
import { Link } from "react-router-dom";
import { Avatar } from "antd";

import { AutoComplete } from "antd";
import { getRequest } from "utils/api/index";
import { RoundSearchBar } from "./styles.js";
import "./styles.css";
const renderTitle = (title) => {title};
const renderItem = (name, id, icon) => ({
  value: name,
  label: (
    
      
        
          {name}
          {console.log("search id: ", id, "name coin : ", name)}
        
      
      
        
      
    
  ),
});

export const Complete = () => {
  const [querySuggest, setQuerySuggest] = useState("");
  const [coinSearched, setCoinSearched] = useState([]);

  const handleSearch = (value) => {
    setQuerySuggest(value);
  };

  useEffect(() => {
    const getCoins = async () => {
      await getRequest(`v2/search-suggestions?query=${querySuggest}`)
        .then((response) => {
          console.log(querySuggest);

          const { coins } = response.data.data;
          const selectedCoins = coins.map((c) => {
            return {
              id: c.uuid,
              icon: c.iconUrl,
              name: c.name,
            };
          });
          setCoinSearched(selectedCoins);
        })
        .catch((error) => console.log(error));
    };
    getCoins();
  }, [querySuggest]);
  const options = [
    {
      label: renderTitle("Coins"),
      // options: [renderItem("AntDesign"), renderItem("AntDesign UI")],
      options: coinSearched.map((coin) => {
        return renderItem(coin.name, coin.id, coin.icon);
      }),
    },
  ];

  return (
    
      
    
  );
};

export default Complete;

import React, { useState, useEffect } from "react";
import { useLocation, useParams } from "react-router-dom";

import { Skeleton, Card, Avatar, Row, Col, Divider, Radio, Button } from "antd";
import { Line } from "@ant-design/plots";
import { getRequest } from "utils/api";
import {
  justUnixTimeStampConvert,
  convertTimeStampToDate,
} from "utils/convertTimestampToDate";
import "./styles.css";
import commaSeparator from "utils/table/commaSeparator";
import NotFound from "screens/errors";
const { Meta } = Card;

export const CoinsLayout = () => {
  const [coinData, setCoinData] = useState({});
  const [totalData, setTotalData] = useState("");
  const [circulatingData, setCirculatingData] = useState("");
  const [chartData, setChartData] = useState([]);
  const [timePeriodHistory, setTimePeriodHistory] = useState("1y");
  const [coinFounded, setCoinFounded] = useState(true);
  const location = useLocation();
  const { name } = useParams();
  const [id, setId] = useState(location.state?.id);
  const [loading, setLoading] = useState(true);
  const handleTimePeriodHistory = (time) => {
    setTimePeriodHistory(time);
  };

  const getCoin = async () => {
    getRequest(`v2/coin/${id}?referenceCurrencyUuid=yhjMzLPhuIDl`)
      .then((response) => {
        const { coin } = response.data.data;
        setTotalData(coin.supply.total);
        setCirculatingData(coin.supply.circulating);
        setCoinData(coin);
        setLoading(false);
      })
      .catch((error) => {
        console.log("error", error);
      });
  };
  const getCoins = async () => {
    getRequest("v2/coins")
      .then((response) => {
        const { coins } = response.data.data;
        console.log(coins);
        const coinFound = coins.find((coin) => coin.name === name);
        if (!coinFound) {
          setCoinFounded(false);
          setLoading(false);
        } else {
          setId(coinFound.uuid);
        }
        setLoading(false);
      })
      .catch((error) => {
        console.log(error);
      });
  };

  useEffect(() => {
    if ((typeof id !== undefined) & (id !== null) & (id !== "")) {
      setCoinFounded(true);
      getCoin();
    } else {
      getCoins();
    }
  }, [id]);

  useEffect(() => {
    if ((typeof id !== "undefined") & (id !== null) & (id !== "")) {
      setCoinFounded(true);
      const getHistoryPrice = async () => {
        await getRequest(
          `v2/coin/${id}/history?timePeriod=${timePeriodHistory}`
        )
          .then((response) => {
            const { data } = response.data;
            const result = convertTimeStampToDate(data.history);
            setChartData(result);
          })
          .catch((error) => console.log(error));
      };
      getHistoryPrice();
    } else {
      getCoins();
    }
  }, [timePeriodHistory, id]);

  const config = {
    data: chartData,
    padding: "auto",
    xField: "date",
    yField: "price",
    xAxis: {
      tickCount: 5,
    },
    smooth: true,
  };
  if (coinFounded === false) {
    console.log("not found coind");
    return ;
  } else {
    return (
      
        

        

        

        

        

        
          
            
              
                }
                  description={{commaSeparator(coinData.price)}}
                >
              
            
          
          
            
              
                
                  
                    Market Cap
                    {commaSeparator(coinData.marketCap)} 
                  
                  
                    Circulating Supply
                    {commaSeparator(circulatingData)} 
                  
                
              
            
          
          
            
              
                
                  
                    Volume 24h
                    {commaSeparator(coinData["24hVolume"])} 
                  
                  
                    Total Supply
                    {commaSeparator(totalData)} 
                  
                
              
            
          
        
        

        

        

        
          Charts Data
        
        
          
            
              {coinData.name + ` Price (USD)`}
            
          
          
            
               handleTimePeriodHistory("24h")}
                value="24h"
              >
                24h
              
               handleTimePeriodHistory("7d")}
                value="7d"
              >
                7d
              
               handleTimePeriodHistory("30d")}
                value="30d"
              >
                30d
              
               handleTimePeriodHistory("1y")}
                value="1y"
              >
                1y
              
            
          
        
        
          
            
              
            
          
          
            
              
                
                
              
              

              
                

                
              

              
              
                
                  

                  
                
                

                
                  

                  
                
              
              
            
          
        
      
    );
  }
};

export default CoinsLayout;

Szaman · Accepted Answer

Your component is not re-rendering when the query props are changing. Here's what's happening:

On initial render, you provide the default value of the id state as location.state?.id. This gets the correct coin id.
id state is changed, so the useEffect hook is triggered which calls the getCoin() method.
on subsequent re-renders, the location is modified, but nothing happens to id.
the useEffect hook is thus not triggered again and getCoin() doesn't get called.

You need to modify the useEffect hook to couple it with the location params instead. Then you can set the new id state and update the data. Here's one way to do it:

useEffect(() => {
  const newId = location.state?.id;
  if (!newId) {
    getCoins();
  }
  setId(newId);
  getCoin();
}, [location]);

PS. a few bugs spotted:

& is not a logical operator, you should be using && instead.
coinFounded → coinFound

PPS. You're using async functions but within them you're using .then callbacks. You can remove the async keyword, or keep it and rewrite the calls using await.

React Router page address change but doesn't refresh

Answers (1)

Related Questions

React Router page address change but doesn&#39;t refresh

Answers (1)

Related Questions

React Router page address change but doesn't refresh