javascript - 本地存储值更改后页面未更新，REACT

Question

我有一个 this.state.language，我通过 app.js 中的本地存储操作它。但是，我将这个值作为 prop 传递给我的路由，无论这个值是什么，我都有一个 if 语句从 json 文件加载数据。例如，如果值为“en”，则从 data.en 加载数据；如果值为“es”，则从 data.es 加载数据。所以我的问题是每当切换 localstorage 值时，它都会在 json 中加载正确的数据，但如果我切换页面则不会。我试过使用 this.props、this.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);
  }

根据本地存储的值在另一个页面上加载 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;

Answer 1

您存储的语言值不正确。你正在得到它是这样的:

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

...然后像这样存储它:

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

这意味着您最终在本地存储(包括引号)中得到 "en"(或 "es")，而不是 en或 es。稍后当您刷新页面时，它与您的任何 data 项都不匹配，因此您默认为 data.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
};

您甚至可以将 defLanguage 定义在与 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;

或者如果您执行defLanguage 操作:

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