尝试在 localStorage 上保留 React-Bootstrap Accordion state 不起作用

Question

我的项目在Next.js上。 所以，我试图将最后一个 Accordion state 保存到localStorage ，这样当我重新加载页面时，之前加载的 Accordion 将再次保持打开状态。 但即使我在defaultActiveKey选项中传递了正确的键数组，它也不起作用。

到目前为止，这是我的代码。

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>
    );
}

Answer 1

由于您在组件水合后在挂载时设置密钥，因此您应该使用activeKey道具而不是defaultActiveKey 。

<Accordion
    alwaysOpen
    activeKey={expandedItem}
    ...
>
    ...
</Accordion>

Answer 2

不要使用更新useEffect的效果，因为它运行每个更新。 这将是一个性能错误。

您可以将 state 设为默认值：localStorage 值（如果存在），否则将其设为空白数组。

这是您的代码：

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>
  );
}