如何為 react localStorage 中的每個項目存儲 state？

Question

當我嘗試在刷新后將 state 保存在組件中時，它將 state 設置為每個組件，我做錯了什么？ 我基本上想將每個唯一項目的 state 設置為 true 或 false，我該如何保存它？ 在反應開發工具 state 中為單擊的每個項目正確更改但我想我沒有正確保存它

父組件：

const AllStickers = ({ countries, setStickersCollected }) => {
  return (
    <main>
      
      {countries.map((country, index) => {
        return (
          <div key={index} className='stickers-section'>
            <CountryTitle title={country} />
            <div className='stickers'>
              {stickers.map((item, index) => {
                return (
                  <StickerNumber
                    key={index}
                    number={item}
                    setStickersCollected={setStickersCollected}
                  />
                );
              })}
            </div>
          </div>
        );
      
    </main>
  );
};

export default AllStickers;

子組件：

    const StickerNumber = ({ number, setStickersCollected }) => {
      const [isCollected, setIsCollected] = useState(
        JSON.parse(localStorage.getItem('isCollected')) || false
      );
    
      useEffect(() => {
        window.localStorage.setItem('isCollected', JSON.stringify(isCollected));
      }, [isCollected]);
    
      const handleClick = (e) => {
        setIsCollected(!isCollected);
        if (isCollected === false) {
          setStickersCollected((prev) => prev + 1);
        } else if (isCollected === true) {
          setStickersCollected((prev) => prev - 1);
        }
      };
    
      return (
        <p className='sticker-number' onClick={handleClick}>
          {number}
          <span
            className='checkmark'
            style={{ display: isCollected === false ? 'none' : 'block' }}
          >
            <FcCheckmark />
          </span>
        </p>
      );
    };
    
    export default StickerNumber;

Answer 1

將項目索引傳遞給 StickerNumber 組件並將其與 isCollected -( ${isCollected}${index} ) 一起使用，同時從本地存儲中設置和獲取值