在 reactjs 中将 localstorage 与 componentDidMount 结合使用

Question

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

我想使用本地存储中的数据在我的 React 应用程序中获取数据。但是在 localstorage 读取值之前组件渲染所以 localStorage.getItem('location') return null.

Answer 1

试试这个

 this.state = {
          location : localStorage.getItem('location')
        };
    componentDidMount() {
        fetch(this.ApiURL + '/tv/dailyTV?location=' + this.state.location)

Answer 2

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

Answer 3

使用 async-wait 来实现您的目标。

尝试：

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

Answer 4

在每个组件渲染之前声明一个状态变量...

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

}

在 reactjs 中将 localstorage 与 componentDidMount 结合使用

Using localstorage with componentDidMount in reactjs

local-storage

reactjs