嘗試在 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>
  );
}