Javascript 本地存储值更改后页面未更新，请作出反应

我有一个

this.state.language

，可以通过app.js中的localstorage进行操作。然而，我将这个值作为一个道具传递给routes，不管这个值是什么，我都有一个if语句从json文件加载数据。e、 g如果值为“en”，则从

data.en

加载数据；如果值为“es”，则从

data.es

加载数据。所以我的问题是，无论何时切换localstorage值，它都会在json中加载正确的数据，但如果我切换页面，它不会加载正确的数据。我尝试过使用

this.props

，

this.state

，而不是使用state，而是直接通过

localstorage.getItem（）

获取它

App.js

constructor(){
    super();
    this.state = {
      sideNav: '',
      language: localStorage.getItem('language')
    }
    this.langEn = this.langEn.bind(this);
    this.langEs = this.langEs.bind(this);
  }

  langEn() {
    this.setState({language: 'en'}, () => localStorage.setItem('language', JSON.stringify(this.state.language)));
    console.log(this.state);
  }

  langEs() {
    this.setState({language: 'es'}, () => localStorage.setItem('language', JSON.stringify(this.state.language)));
    console.log(this.state);
  }

在另一个页面上编写代码，根据localstorage值加载json数据

class NewFormDetails extends Component {
    constructor(props) {
        super(props);

        this.state = {
            language: this.props.language,
            siteName: '',
            counties: '',
            siteAddress: '',
            siteEmail: '',
            siteNumber: '',
            siteCat: '',
            openTimes: '',
            fees: '',
            access: '',
            gps: '',
            w3w: '',
            txtHeader: '',
            txtContent: ''
        };

    }

    validateForm() {
        if (this.state.siteName != '' &&
            this.state.siteAddress != '' &&
            this.state.siteEmail != '' &&
            this.state.siteNumber != '' &&
            this.state.openTimes != '' && 
            this.state.fees != '' && 
            this.state.access != '' && 
            this.state.gps != '' && 
            this.state.w3w != '' && 
            this.state.txtHeader != '' && 
            this.state.txtContent != '') {
                return true;
            } else {
                return false;
            }
    }

    handleChange = e => {
        this.setState({ ...this.state, [e.target.name]: e.target.value });
        console.log(this.state);
    }

    handleSubmit = event => {
        event.preventDefault();
        console.log(this.state);
        this.props.history.push('/newSite/tours');
    }

    render() {

        let jsonLang;

        if (this.props.language == 'en') {
            jsonLang = data.en;
        } else if (this.props.language == 'es') {
            jsonLang = data.es;
        } else {
            jsonLang = data.en;
        }

        this.placeholders = jsonLang.placeholders;
        this.counties = jsonLang.counties;
        this.categories = jsonLang.categories;

---

您存储的语言值不正确。你会得到这样的结果：

this.state = {
  sideNav: '',
  language: localStorage.getItem('language')
}

localStorage.setItem('language', JSON.stringify(this.state.language));

…但随后将其存储为：

this.state = {
  sideNav: '',
  language: localStorage.getItem('language')
}

localStorage.setItem('language', JSON.stringify(this.state.language));

这意味着您将在本地存储（包括引号）中使用

“en”

（或

“es”

）而不是

en

或

es

。稍后刷新页面时，这与

数据中的任何项都不匹配，因此默认为
数据.en

因为
language
是一个字符串，所以不需要使用JSON。只是：

localStorage.setItem('language', this.state.language);


还有一个问题：您不允许加载页面，并且
localStorage
中没有
language
值。在您的情况下，您可以使用
|
习惯用法，因为
localStorage.getItem
在项目不存在时返回
null
：

this.state = {
  sideNav: '',
  language: localStorage.getItem('language') || 'en'
};

（我还在那里添加了缺少的
；
。）

您可能想进一步验证它：

const defLanguage = 'en';
let language = localStorage.getItem('language') || defLanguage;
if (!data[language]) {
    language = defLanguage;
}
this.state = {
  sideNav: '',
  language
};

您甚至可以将
deflague
定义在与
data
相同的级别上（并且就在它旁边），这样您就可以在应用默认值的任何地方使用它


正如我在对上一个问题的评论中提到的，当在组件中使用
this.props.language
时，您可以替换

if (this.props.language == 'en') {
    jsonLang = data.en;
} else if (this.props.language == 'es') {
    jsonLang = data.es;
} else {
    jsonLang = data.en;
}

简单地说：

jsonLang = data[this.props.language] || data.en;

或者，如果您执行了
deflaguage
操作：

jsonLang = data[this.props.language] || data[defLanguage];