如何使用来自localStorage的数据渲染React组件？

Question

I'm building a React app where a lot of the content of the react app is pulled from the localStorage. Rather than using a database, when the app is run, the first thing that is done is the localStorage is populated with the data, then the HTML is built from the JS using the data from the localStorage....

But now with React, I'm starting to move from hard coding the information in, to using it from the localStorage. However, it seems the react components are rendered before the JS that loads the localStorage. Using console.log, I found that the React rendering was done before anything else. How would I go about making sure the HTML (from the react components) isn't implemented until AFTER the JS is done that builds the localStorage?

MAIN APP COMPONENT

class App extends React.Component {

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

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

NAVIGATION COMPONENT

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

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

Answer 1

You can use the local storage getItem method - 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

Let me try to revise your code some:

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>
        )}
     }

You should research the following: Lifecycle methods and Local Storage

Answer 3

The default methods of a React Component are run in a certain sequence ( the "lifecycle" of the component ).

If you have operations you want to perform, like building localStorage, you can place them earlier in the sequence.

Initialization and Mounting both occur before rendering, so you can build localStorage in either of those phases. Specifically, try overriding the componentWillMount() method.