Redux、localStorage 和 React：刷新页面时出错

Question

我的目标是通过刷新保持我的 React 状态。 我已经在教程中看到它使用浏览器的localStorage完成的（如果你想看，只需点击那里）。 我想使用该解决方案，因为相对于淘汰 Redux Persist 而言，它看起来很简单。

预期的结果是一个像以前一样刷新和重新加载的页面。 相反，我收到一个错误。 我怀疑错误发生是因为 Redux 状态卸载（？），然后我的代码尝试将const threadTitle指向this.props.posts[number]中的状态，这当然不存在，因为刷新只是卸载了它。

我得到的错误如下：

TypeError: Cannot read property 'title' of undefined
fullThread.render
C:/Users/Roland/React_apps/reddit-knockoff/src/FullThread/FullThread.js:30
  27 | 
  28 |  // deliberate exclusion of 2nd parameter in .slice() to make it go til the end
  29 |  const number = this.props.location.pathname.slice(1);
> 30 |  const threadTitle = this.props.posts[number].title;
     | ^  31 |  let flair = null;
  32 |  const upVotes = this.props.posts[number].upvotes;
  33 |  const author = this.props.posts[number].author;

到目前为止，我已经尝试观看教程视频并搜索 Google 的 StackOverflow 结果以获取有关如何使用 localStorage 解决问题的提示。 我已经启动并运行了一些代码，但这还不够。 看一看：

FullThread.js，错误消息指向的地方。

import React, { Component } from "react";
import { connect } from "react-redux";
import { Link } from "react-router-dom";

class fullThread extends Component {
    constructor(props) {
        super(props);
        const stateFromStorage = localStorage.getItem("state");
        if (this.props.posts === null) {
            this.props.returnPostsToState(stateFromStorage);
        }
    }

    componentDidMount() {

        localStorage.setItem("state", this.props.posts);
    }

    render() {

        // deliberate exclusion of 2nd parameter in .slice() to make it go til the end
        const number = this.props.location.pathname.slice(1);
        const threadTitle = this.props.posts[number].title;
        const upVotes = this.props.posts[number].upvotes;
        const author = this.props.posts[number].author;
        const age = this.props.posts[number].age;
        const postText = this.props.posts[number].postText;


        return (
            <div>
                <div className="MainBody">
                    <h4>Thread titled: {threadTitle}</h4>
                    <p>Removed content. The constants threadTitle, upVotes, author, age and postText go here</p>

                </div>
            </div>
        );
    }
}

const mapDispatchToProps = dispatch => {
    return {
        returnPostsToState: stateFromStorage =>
            dispatch({ type: "RETURN", payload: stateFromStorage })
    };
};

const mapStateToProps = state => {
    return {
        posts: state.posts
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(fullThread);

post.js，其中包含我的 Reducer

const initialPosts = {
    posts: [
        {
            id: 0,
            upvotes: 831,
            flair: null,
            title: "New? READ ME FIRST!",
            author: "michael0x2a",
            age: "2 years",
            comments: 15,
            postText:
                "Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua."
        }
    ],
    loggedIn: false
};

const reducer = (state = initialPosts, action) => {
    if (action.type === "ADD_POST") {
        console.log("HEY: ", action.newPost);
        console.log(state.posts.concat(action.newPost.post.tempThread));
        return {
            ...state,
            // receives newPost data from app.js
            posts: state.posts.concat(action.newPost.post.tempThread)
        };
    }
    if (action.type === "RETURN") {
        console.log("RETURNED! ", action.payload);
        console.log("RETURNED: ", state.posts);
        return {
            ...state,
            posts: state.posts.concat(action.payload)
        };
    }

    return state;
};

export default reducer;

我会发布 app.js 但我认为它不相关。

我对我的代码和错误的争论是，好吧，我认为我的代码应该可以工作！ 首先我调用localStorage.setItem("state", this.props.posts); 在我的 componentDidMount() 方法中，用我的帖子状态变量的内容设置我的 localStorage。 然后当页面重新加载时，我的构造函数方法 - 在组件生命周期中的任何其他代码之前首先触发！！！ -- 调用this.props.returnPostsToState(stateFromStorage); ，从而使用“state From Storage”的内容重置全局Redux状态，这是我原来的帖子内容！

我究竟做错了什么？

我不知道如何实现它，但是，我认为有一些if (stateHasReloaded) { const threadTitle = this.props.posts[number].title; }解决方案，“ if (stateHasReloaded) { const threadTitle = this.props.posts[number].title; } ”我只是不确切地知道它的样子。

在此先感谢您的帮助

Answer 1

我认为当您从本地存储获取数据时，它将是字符串，因此之后您的组件将无法解析它。尝试从本地存储获取数据时解析数据。

 if (this.props.posts === null) {
      this.props.returnPostsToState(JSON.parse(stateFromStorage));
 }

而且当您存储到本地存储时，将您的数据字符串化为：

componentDidMount() {

    localStorage.setItem("state", JSON.stringify(this.props.posts));
}

为了更安全，您可以随时检查数据是否存在，因为您从 url 获取数字，因此任何人都可以将其更改为帖子没有的数字：

const threadTitle = this.props.posts[number]?this.props.posts[number].title:'';

让我看看它是否有效。