如何使用钩子在React中存储Cookie中的对象

npm install js-cookie

import React, { useState, useEffect } from 'react';
import Cookies from 'js-cookie';

const [myObject, setMyObject] = useState(() => {
  const cookieValue = Cookies.get('myObject');
  if (cookieValue) {
    return JSON.parse(cookieValue);
  } else {
    return { key1: 'value1', key2: 'value2' }; // 默认值
  }
});

useEffect(() => {
  Cookies.set('myObject', JSON.stringify(myObject));
}, [myObject]);

import React, { useState, useEffect } from 'react';
import Cookies from 'js-cookie';

const MyComponent = () => {
  const [myObject, setMyObject] = useState(() => {
    const cookieValue = Cookies.get('myObject');
    if (cookieValue) {
      return JSON.parse(cookieValue);
    } else {
      return { key1: 'value1', key2: 'value2' }; // 默认值
    }
  });

  useEffect(() => {
    Cookies.set('myObject', JSON.stringify(myObject));
  }, [myObject]);

  // 其他组件代码...

  return (
    // 组件的JSX代码...
  );
};

export default MyComponent;