Блог

Когда я увеличиваю счетчик в localhost /, а затем я просматриваю значение счетчика в http://localhost:3000/CountView . Мое значение счетчика в http://localhost:3000/CountView снова устанавливается на 0. Пожалуйста, помогите, ниже приведены мои файлы и скриншот.

App.js

 import React from 'react';
import CountView from './CountView';
import CountSet from './CountSet';
import CountContext from './CountContext';
import {
  BrowserRouter as Router,
  Route,
  Switch
} from "react-router-dom";
function App() {
  return (
    <CountContext>
    <Router>
      <Switch>
              <Route exact path="/" component={CountSet}></Route>
              <Route exact path="/CountView" component={CountView}></Route>
              </Switch>
         </Router>
         </CountContext>
  );
}

export default App;
 

CountContext.js

 import React,{createContext,useReducer,useState}  from 'react';
export  const countContext=createContext({});
function CountContext(props){
    const [count, setCount] = useState(0);

    const reducer = (intitalState, action) => {
        console.log('I am here');
        if(action.type === 'Increment') {
            console.log('I am in Increment');
       return intitalState 1;
        }
        if(action.type === 'Decrement') {
            return intitalState-1;
             }
      }
  
      const [newState, dispatch] = useReducer(reducer, count);

      return (
        <countContext.Provider value={{newState,dispatch}}>
            {props.children}
            </countContext.Provider>
      );
}
export default React.memo(CountContext);
 

CountView.js

   import React, { useContext } from 'react';
    import {countContext} from './CountContext';
    function CountView(){
        const countSubscriber=useContext(countContext);
    return (<h1>{countSubscriber.newState}</h1>);
    }
    export default CountView;
 

CountSet.js

 import React,{useContext} from 'react';
import {countContext} from './CountContext';
function CountSet(){
    const countSubscriber=useContext(countContext);
return (<div>
    <h1>{countSubscriber.newState}</h1>
    <button onClick={()=>countSubscriber.dispatch({type:'Increment'})}>Increment </button>
    <button onClick={()=>countSubscriber.dispatch({type:'Decrement'})}>Decrement </button>
</div>);
}
export default CountSet;
 

Скриншот подсчета в http://localhost:3000 /: https://i.stack.imgur.com/PNgnx.png
Скриншот подсчета в http://localhost:3000/CountView : https://i.stack.imgur.com/rlpJE.png

Пожалуйста, дайте мне знать, почему существует разница в количестве в двух маршрутах и как я могу их исправить.

Заранее спасибо. Счастливого кодирования 🙂

Я нашел решение. когда вы переходите по ссылке http://localhost:3000/CountView страница обновляется, и состояние не поддерживается. Попробуйте сохранить состояние, нажав кнопку, с помощью которой мы можем перейти по этой ссылке.