Блог

В настоящее время я впервые пытаюсь внедрить localStorage в свой проект, я справился с большей частью этого, но когда мой проект впервые загружается в браузере, а localStorage пуст, я получаю:

 TypeError: Cannot read property 'totalresults' of null (localStorage) 

 

Я знаю, что это связано с тем, что проект пытается считывать данные из localStorage и выводить их в проект, как мне избежать этого?

Мой код

 export default class QuizPage extends Component {

    state = {
        results: 0,
        currentCourse:null,
        totalResults: "",
        percentage: "",
        passed: "",
        answered: 0,
        disabled: true,
        courses: []
    }


    componentDidMount(){

        // Read results from localStorage

        const courseResults = JSON.parse(localStorage.getItem(this.props.match.params.course))

        this.setState({
          currentCourse: courseID,
          totalResults: courseResults.totalresults,
          results: courseResults.results,
          passed: courseResults.passed.toLowerCase()
        })

      );


componentDidUpdate(prevProps) {

       // Save current results to localStorage

        const course = {
          result: this.state.results,
          passed: this.state.passed,
          totalresults: this.state.totalResults,
          coursename: this.state.courseName
        }

        localStorage.setItem(this.props.match.params.course, JSON.stringify(course))


      }



 

В первый раз, если в локальном хранилище ничего нет, тогда

 const courseResults = JSON.parse(localStorage.getItem(this.props.match.params.course))
 

будет равно null.

Поэтому перед использованием courseResults убедитесь, что это истинное значение:

 componentDidMount() {

    const courseResults = JSON.parse(localStorage.getItem(this.props.match.params.course))

    if (courseResults) {
        this.setState({
          currentCourse: courseID,
          totalResults: courseResults.totalresults,
          results: courseResults.results,
          passed: courseResults.passed.toLowerCase()
        })
    }

};