javascript - 使用 reactjs 从本地存储更新我的组件数据

问题描述

我有一个商店应用程序，它的目录组件将数据存储在本地存储中。但是我需要从插入到本地存储中的数据中，另一个组件的状态发生了变化。

import React, {useState, useEffect} from 'react';

import './style.css';

function Footer(props) {
  const colorThemeFooter = props.colorThemeFooter;

  const [cont, setCont] = useState([]);

  useEffect(() => {

    const cont = localStorage.getItem("cartCont");
    setCont(cont);

}, [cont]);


  return (
    <div className="footer-default" style={{background: colorThemeFooter}}>
        <div className="footer-container">

          <p>{cont}<a href="https://github.com/kewineic">&copy;Kewin</a> - <a href="https://b2w.gupy.io/">Desafio Loja Pokemon</a></p>

        </div>    
    </div>
  )
}

export default Footer;

有没有办法在没有 redux 或 mobx 的情况下做到这一点？

标签： javascriptreactjslocal-storage

是的，您可以使用contextAPI 轻松存储全局状态，特别是useContext像这样的钩子：


    import {createContext, useState} from 'react;
    export const Store = createContext(null);
    export default function Provider({children}){
        const storedCont = JSON.parse(localStorage.get("cart-cont")) || []
        const [cont, setCont] = useState(storedCont);
        return <Store.Provide value={{cont, setCont}}>
        {children}
        </Store.Provider>
    }

在其他文件中，您可以像这样轻松使用它：

import {useContext} from 'react';
import {Store} from './store.jsx'
const otherComponent = () => {
    const {cont, setCont} = useContext();
    // update cont with setCont
}
export default otherComponent;

不要忘记让 Provider 组件成为整个应用程序的父组件

javascript - 使用 reactjs 从本地存储更新我的组件数据

问题描述

解决方案

推荐阅读