Reactjs 在不使用redux persist或localStorage的情况下持久化数据

所以，我再一次面临着坚持状态树的问题。在登录中，为了让用户持久化，我从我的主App.js发送了一个操作，并获得当前登录用户，如下所示：

App.js

this.state = {
   postTitle: "",
   postDescription: "",
   maxLength: 140
}

componentDidMount（）{
const authToken=localStorage.getItem（“authToken”）
如果（authToken）{
this.props.dispatch（{type:“TOKEN\u验证\u启动”}）
this.props.dispatch（getCurrentUser（authToken））
}
}

现在，我有了一个表单，当它被提交时，我将用户重定向到提要，在那里我将以卡片的形式显示文章标题和描述。但和往常一样，刷新后postData将消失

这意味着我是否必须创建另一个路由，类似于我为获取当前登录用户而创建的/me路由？并从App.js中的componentDidMount（）再次发送操作

NewPostForm.js

this.state = {
   postTitle: "",
   postDescription: "",
   maxLength: 140
}

import React，{Component}来自“React”
从“react redux”导入{connect}
从“./actions/userActions”导入{addpost}
类NewpostForm扩展组件{
建造师（道具）{
超级（道具）
此.state={
职称：“，
postDescription:“”，
最大长度：140
}
}
handleChange=（事件）=>{
常量{name，value}=event.target
这是我的国家({
[名称]：值
})
}
handleSubmit=（）=>{
const postData=this.state
this.props.dispatch（addpost（postData，（）=>{
this.props.history.push（“/feed”）
})
)
}
render（）{
const charactersRemaining=（this.state.maxLength-this.state.postDescription.length）
返回(
提交
剩余字符：{charactersRemaining}
)
}
}
常量mapStateToProps=（存储）=>{
退货商店
}
导出默认连接（MapStateTops）（NewpostForm）

addPost操作

export const addpost=（postData，重定向）=>{
日志（“内部addpost操作”）
返回异步调度=>{
派遣({
类型：“添加后开始”
})
试一试{
const res=等待axios.post（“http://localhost:3000/api/v1/posts/new“，postData{
标题：{
“内容类型”：“应用程序/json”，
“授权”：“${localStorage.authToken}`
}
})
派遣({
键入：“添加\u post\u SUCCESS”，
数据：{post:res.data.post}，
})
重定向（）
}捕捉（错误）{
派遣({
类型：“添加\u post\u错误”，
数据：{error:“出现了问题”}
})
}
}
}

Feed.js

this.state = {
   postTitle: "",
   postDescription: "",
   maxLength: 140
}

从“React”导入React；
从“react redux”导入{connect}；
常量提要=（道具）=>{
//const postTitle=（props.post和&props.post.post.post.postTitle）
返回(

{/*{postTitle}*/}

由用户编写的文章的文本。
);
};
常量mapStateToProps=状态=>{
返回状态；
};
导出默认连接（MapStateTops）（提要）；

如果我理解正确，看起来您在提要页面中使用了

/api/v1/posts/new

的响应，但试图访问NewPostForm.js的本地状态

this.state = {
   postTitle: "",
   postDescription: "",
   maxLength: 140
}

您可能需要将数据保存到redux store，以便可以跨不同的路由共享，而不是使用本地状态来保存无法共享到另一个组件的表单数据（除非作为道具传递，这里不是这种情况）

 handleChange = (event) => {
   const { dispatch } = this.props;
   const { name, value } = event.target;
   dispatch(setPostData(name, value));
 }

您的操作可能如下所示：-

export const setPostData = (name, value) => ({
     type: "SET_POST_DATA",
     name,
     value,
});

之后，您可以在提要页面上使用this.props.postTitle

---

编辑：为了在页面重新加载（完全浏览器重新加载）之间保持状态，您可能需要获取装载时的所有数据（高阶组件会有帮助）或使用本地存储

我知道您希望不使用redux，但redux的正常行为会迫使您从头开始重新初始化存储。如果您想保持您的状态甚至刷新页面，我建议您使用以下软件包：

如果您在页面重定向中丢失状态，或使用react router转到其他路由，您将希望使用：

---

@FMCorz就我所知localStorage.getItem是一个同步函数。我这里的问题是如何在刷新时保存帖子数据，就像我第一次将用户重定向到提要时，所有内容都会显示出来—帖子标题、描述等，但在刷新时，它不会显示出来。@DanielB。你说得对！我删除了我的评论。你能添加你的“/feed”组件代码吗？添加了feed组件@Niraj@metalHeadDev刚才看到你对“刷新”问题的评论，你是指完全的浏览器刷新（重新加载网页）。你是指我问的另一个问题吗？这不会从redux商店中消失吗？我们如何在handleChange上分派操作？是的，它将消失，简言之，您可以通过在每次重新加载时调用每个端点或将数据存储在本地存储中，然后在重新加载时使用本地存储初始化存储来解决它。将数据存储到本地存储似乎成本较低，因为不会有提取延迟。在使用本地存储时，您可能需要进行上述更改，以便提要页所需的所有数据都有足够的数据加载。此外，我建议保存当前路线信息。最好使用react router redux而不是react router redux，因为此软件包已被弃用。