[英]Attempt to persist React-Bootstrap Accordion state on localStorage not working
My project is on Next.js .我的项目在Next.js上。 So, I am trying to save the last Accordion state to
localStorage
, so that when I reload the page, the previous loaded Accordion will again stay open.所以,我试图将最后一个 Accordion state 保存到
localStorage
,这样当我重新加载页面时,之前加载的 Accordion 将再次保持打开状态。 But even though I am passing the correct array of keys inside the defaultActiveKey option, it's not working.但即使我在defaultActiveKey选项中传递了正确的键数组,它也不起作用。
Here is my code so far.到目前为止,这是我的代码。
import { useState, useEffect } from 'react'
import Accordion from 'react-bootstrap/Accordion'
export default function Example() {
let [expandedItem, setExpandedItem] = useState(new Array())
useEffect(() => {
setExpandedItem(JSON.parse(localStorage.getItem('expandedItem')));
}, [])
return (
<Accordion
alwaysOpen
defaultActiveKey={expandedItem}
onSelect={e => {
if (e !== null) {
setExpandedItem(e);
localStorage.setItem('expandedItem', JSON.stringify(e));
}
}}>
<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do
eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad
minim veniam, quis nostrud exercitation ullamco laboris nisi ut
aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
pariatur. Excepteur sint occaecat cupidatat non proident, sunt in
culpa qui officia deserunt mollit anim id est laborum.
</Accordion.Body>
</Accordion.Item>
</Accordion>
);
}
Since you're setting the key on mount after the component has hydrated, you should use the activeKey
prop instead of defaultActiveKey
.由于您在组件水合后在挂载时设置密钥,因此您应该使用
activeKey
道具而不是defaultActiveKey
。
<Accordion
alwaysOpen
activeKey={expandedItem}
...
>
...
</Accordion>
Don't useEffect
for update state because it run every update.不要使用更新
useEffect
的效果,因为它运行每个更新。 This will be a performance bug.这将是一个性能错误。
You can make the default of the state: the localStorage value if exists else make it blank Array.您可以将 state 设为默认值:localStorage 值(如果存在),否则将其设为空白数组。
Here is your code:这是您的代码:
import { useState, useEffect } from "react";
import "../node_modules/bootstrap/dist/css/bootstrap.min.css";
import Accordion from "react-bootstrap/Accordion";
export default function Example() {
let defaultState = JSON.parse(localStorage.getItem("expandedItem")) || new Array();
let [expandedItem, setExpandedItem] = useState(defaultState);
return (
<Accordion
alwaysOpen
defaultActiveKey={expandedItem}
onSelect={(e) => {
if (e !== null) {
setExpandedItem(e);
localStorage.setItem("expandedItem", JSON.stringify(e));
}
}}
>
<Accordion.Item eventKey="0">
<Accordion.Header>Accordion Item #1</Accordion.Header>
<Accordion.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</Accordion.Body>
</Accordion.Item>
<Accordion.Item eventKey="1">
<Accordion.Header>Accordion Item #2</Accordion.Header>
<Accordion.Body>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt
ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation
ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in
reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur
sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
est laborum.
</Accordion.Body>
</Accordion.Item>
</Accordion>
);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.