路由后保留数组状态挂钩

Question

我试图useState在路由到另一个页面后保留/保留反应钩子，现在假设我有一个名为数组的数组sections保存在useState钩子中，在数组中我有 3 个项目

广告、推广、建造

当我路由到另一个渲染时，钩子的值useState正在重置，其中包括数组。

相关功能

const [calculator, setCalculator] = useState({section: [], graphic: false}); //Sections array inside

   // Responsible to add item to the array, also promote and ads, just short version so you can understand

   function addPath(section){

        if(section === "build"){

            if(calculator.section.some(val => val === "build")){

                let filteredArray = calculator.section.filter(item => item !== 'build')

                setCalculator({section: filteredArray});

                $('.build').removeClass('active');

            }

            else{

                var joined = calculator.section.concat('build');

                setCalculator({ section: joined })

                $('.build').addClass('active');

            }

        }

    }

//Route from /start to /values

const Continue = () =>{

    history.push("/values");

    history.go(0);

}

// Check if the item exist in the array after routing the page

function checkArray(val) {

    return calculator.section.some(item => item === val);

}

建兴兴业

 <Route path="/start">

     <p className="secondary">

        בחר מסלול רלוונטי (ניתן לבחור יותר מאחד)

     </p>

     <Row className="margTop">

           <Col lg="4"><img id="firstSelectors" className="build" onClick={() => addPath('build')} src={Code} alt="בניית אתרים" /></Col>

           <Col lg="4"><img id="firstSelectors" className="promote" onClick={() => addPath('promote')}  src={Promotion} alt="קידום אתרים" /></Col>

           <Col lg="4"><img id="firstSelectors" className="ad" onClick={() => addPath('ad')}  src={Advertise} alt="שיווק דיגטלי" /></Col>

       </Row>

       <button onClick={Continue}>המשך</button>

  </Route>

  <Route path="/values">

        {checkArray('ad') ? 'yes' : 'no'}

  </Route>

useState路由到另一个页面后如何保留钩子？现在它正在重置（我已经调试了计算器值来检查）。

Answer 1

对于您的用例，我将创建一个新挂钩，该挂钩在挂载时从 localStorage 读取并将更改持久保存到 localStorage。useHooks 的useLocalStorage钩子非常适合这里