在 ReactJS 中尝试使用 useEffect() 从本地存储获取数据时出现本地存储问题

Question

I am trying to fetch data in localstorage using ReactJS. Can some one please help me here is my sample code.

let [rows,setRows] = useState([]);

    React.useEffect(() => {
        rows = localStorage.getItem("my_tier_list");
        if(rows){
            setRows(JSON.parse(rows));
        }
  
      },[]);
  
      React.useEffect(() => {
        localStorage.setItem("my_tier_list", JSON.stringify(cart));
      });

Can some one please help me and thanks in advance

Answer 1

There are three problems to your above code.

1. You can't directly assign values to your state variable using = , you must do it using the setter functions.
2. You have not added the dependency list in the second useEffect .
3. You have not used the correct name to set the localStorage.

let [rows,setRows] = useState([]);

    React.useEffect(() => {
        // you can't directly set a state variable. Create a new local variable
        const localRows = localStorage.getItem("my_tier_list");
        if(localRows){
            setRows(JSON.parse(localRows));
        }
  
      },[]);
  
      React.useEffect(() => {
        localStorage.setItem("my_tier_list", JSON.stringify(rows)); // corrected it to rows
      }, [rows]); // added the array as dependency list. This will trigger this only when "rows" gets changed

Update

Based on your code shared through code sandbox, you need to update your Reducer.js.

const updateLocalStorage = (cart) => {
  localStorage.setItem("my_tier_list", JSON.stringify(cart));
};
export const cartReducer = (state, action) => {
  switch (action.type) {
    case "ADD_TO_CART": {
      const updatedState = {
        ...state,
        cart: [...state.cart, { ...action.payload, qty: 1 }]
      };
      updateLocalStorage(updatedState.cart);
      return updatedState;
    }
    case "REMOVE_FROM_CART": {
      const updatedState = {
        ...state,
        cart: state.cart.filter((c) => c.id !== action.payload.id)
      };
      updateLocalStorage(updatedState.cart);
      return updatedState;
    }
    case "CHANGE_CART_QTY": {
      const updatedState = {
        ...state,
        cart: state.cart.filter((c) =>
          c.id === action.payload.id ? (c.qty = action.payload.qty) : c.qty
        )
      };
      updateLocalStorage(updatedState.cart);
      return updatedState;
    }
    default:
      return state;
  }
};

And in Header.js

    let [rows,setRows] = useState([]);

    React.useEffect(() => {
        const localRows = localStorage.getItem("my_tier_list");
        if(localRows){
            setRows(JSON.parse(localRows));
        }
      },[cart]); // adding cart will ensure any changes you make is reflected.

Answer 2

Please look into following sandbox: https://codesandbox.io/s/heuristic-rain-n97hf3

• Set local storage item on some event handler: localStorage.setItem("value", value);
• Get local storage item with: const localStorageValue = localStorage.getItem("value");