如何使用來自localStorage的數據渲染React組件？

Question

我正在構建一個React應用程序，其中React應用程序的許多內容都是從localStorage提取的。 在運行該應用程序時，與其使用數據庫，不如使用數據庫，首先要做的是用數據填充localStorage，然后使用localStorage的數據從JS構建HTML。

但是現在有了React，我開始從對信息進行硬編碼轉變為從localStorage使用信息。 但是，似乎React組件是在加載localStorage的JS之前呈現的。 使用console.log，我發現React渲染首先完成。 我將如何確保在完成構建localStorage的JS之后才實現HTML（來自react組件）？

主要應用程式組件

class App extends React.Component {

  constructor(props) {
    super(props);
    console.log("Constructing App");
  }

  render() {
    return (
    <div>
      <Navigation {this.title: "Something based on localStorage"/>
     </div>
    )}
 }

導航組件

function Navigation(props) {
  console.log("Constructing Nav");

  return ("stuff here pulled from props like props.title")
}

Answer 1

您可以使用本地存儲的getItem 方法 localStorage.getItem('myData');

class App extends React.Component {

  constructor(props) {
    super(props);
    state: {
      myData: {}      
    }  
  }

  componentDidMount(){
    const myData = localStorage.getItem('myData');
    // set the state with the data
    this.setState({myData});
  }

  render() {
    return (
    <div>
      <Navigation title={this.state.myData} />
     </div>
    )}
 }

Answer 2

讓我嘗試修改您的代碼：

class App extends React.Component {
      constructor(props) {
        super(props);
        console.log("Constructing App");
        this.state={
          fromLocal:''
        }
      }
      componentDidMount(){
        let newSearchColumns = localStorage.getItem('searchColumns');
        this.setState({fromLocal: newSearchColumns})
      }

      render() {
        return (
        <div>
          <Navigation title= {this.state.fromLocal}/>
         </div>
        )}
     }

您應該研究以下內容： 生命周期方法和本地存儲

Answer 3

React Component的默認方法按特定順序（ 該組件的“生命周期” ）運行。

如果您要執行某些操作（例如構建localStorage），則可以將它們放在序列的前面。

初始化和掛載都在渲染之前進行，因此您可以在這兩個階段之一中構建localStorage。 具體來說，請嘗試重寫componentWillMount（）方法。