Using localstorage with componentDidMount in reactjs

user_15232088 0
Viewed 561
componentDidMount() {
    fetch(this.ApiURL + '/tv/dailyTV?location=' + localStorage.getItem('location'))
            .then(res => res.json())
            .then(data => {
              this.setState({
                companyname : data.static.companyname,
                companymission : data.static.companymission,
                videocount : data.static.videocount,
                companyasset : data.static.companyasset
              })
            })
  }

I want to fetch a data in my react application using a data from local storage. But component render before localstorage read the value so localStorage.getItem('location') return null.

reactjs local-storage
4 Answers

try this

 this.state = {
          location : localStorage.getItem('location')
        };
    componentDidMount() {
        fetch(this.ApiURL + '/tv/dailyTV?location=' + this.state.location)
user_145281050 
async componentDidMount() {
const loc = await localStorage.getItem('location')
    fetch(this.ApiURL + '/tv/dailyTV?location=' + loc)
            .then(res => res.json())
            .then(data => {
              this.setState({
                companyname : data.static.companyname,
                companymission : data.static.companymission,
                videocount : data.static.videocount,
                companyasset : data.static.companyasset
              })
            })
  }
user_104293980

Use async-wait to achieve your goal.

Try:

async componentDidMount() {
    const location = await localStorage.getItem('location')

    if(location) {
       fetch(this.ApiURL + '/tv/dailyTV?location=' + location)
            .then(res => res.json())
            .then(data => {
              this.setState({
                companyname : data.static.companyname,
                companymission : data.static.companymission,
                videocount : data.static.videocount,
                companyasset : data.static.companyasset
              })
            })
    }
}
user_104278070

Before each and every Component gets render declare a state variable...

constructor(props) {
  super(props);

  this.state = {
    location: true
  };
}
componentDidMount() {
    const location = localStorage.getItem('location');
    fetch(this.ApiURL + '/tv/dailyTV?location=' + location)
        .then(res => res.json())
        .then(data => {
            this.setState({
                companyname : data.static.companyname,
                companymission : data.static.companymission,
                videocount : data.static.videocount,
                companyasset : data.static.companyasset
              })
            })

}
user_119956740
Related