这是在 localStorage 中存储数据列表并在使用 React 应用程序搜索时显示它们的最佳方式
Posted
技术标签:
【中文标题】这是在 localStorage 中存储数据列表并在使用 React 应用程序搜索时显示它们的最佳方式【英文标题】:Which is the best way to store a list of data in localStorage and display them when searched using a React app 【发布时间】:2020-12-25 02:00:19 【问题描述】:我正在尝试构建一个电影目录,有点像待办事项列表应用程序,但在这里您可以存储您最喜欢的电影,并可以通过搜索电影名称来搜索和显示它们。 所以我使用 localStorage 来存储数据,然后在搜索结果与电影名称字符串匹配时显示。 在“提交”按钮时,我可以看到 localStorage 有数据,但数据并未永久存储。 当我尝试输入下一个输入时,它就被删除了。那么我该如何解决这个问题以及有效存储数据的最佳方法是什么。
<! Start of the snippet -->
import React from 'react';
import './App.css';
import Search from './components/Search';
import FormInput from './components/FormInput';
import Show from './components/Show';
import Container, Row, Col from 'react-bootstrap';
class App extends React.Component
userData;
state =
movieName: '',
ratings: '',
duration: ''
handleMovieName = (e) =>
this.setState(movieName: e.target.value)
handleRatings = (e) =>
this.setState(ratings: e.target.value)
handleDuration = (e) =>
this.setState(duration: e.target.value)
handleSubmit = (e) =>
console.log(`$this.state.movieName $this.state.ratings $this.state.duration`);
e.preventDefault();
componentDidMount()
this.userData = JSON.parse(localStorage.getItem('user'));
if(localStorage.getItem('user'))
this.setState(
movieName: this.userData.movieName,
ratings: this.userData.ratings,
duration: this.userData.duration
)
else
this.setState(
movieName: '',
ratings: '',
duration: ''
)
componentWillUpdate(nextProps, nextState)
localStorage.setItem('movieName', JSON.stringify(nextState));
render()
return (
<div>
<header><h1>Netflix Movie Directory</h1></header>
<main>
<Search />
<Container className="container1">
<Row noGutters="true">
<Col xs=12 md=8>
<Show
handleDuration = this.state.duration
handleRatings = this.state.ratings
handleMovieName = this.state.movieName />
</Col>
<Col xs=6 md=4>
<FormInput
handleSubmit=this.handleSubmit
handleDuration = this.handleDuration
handleRatings = this.handleRatings
handleMovieName = this.handleMovieName />
</Col>
</Row>
</Container>
</main>
</div>
);
export default App;
<!-- end snippet -->
【问题讨论】:
【参考方案1】:错误似乎很可能来自 localStorage 键不匹配。
您从不在 localStorage 中设置 user
键,但如果它不存在,则重置组件的状态,触发 componentWillUpdate
,这将重写存储在本地存储中 movieName
键下的信息.
所以,可能你想从本地存储中读取movieName
而不是user
,如下所示:
componentDidMount()
const maybeMovieInfo = JSON.parse(localStorage.getItem('movieName'));
if(localStorage.getItem('movieName'))
this.setState(
movieName: maybeMovieInfo.movieName,
ratings: maybeMovieInfo.ratings,
duration: maybeMovieInfo.duration
)
else
this.setState(
movieName: '',
ratings: '',
duration: ''
)
一般来说,将这种类型的信息存储在本地存储中是一个完全有效的用例。
【讨论】:
【参考方案2】:我想知道为什么需要使用 componentWillUpdate。它被标记为不安全,所以尽量避免它。文档中明确提及:https://reactjs.org/docs/react-component.html#updating 所以我建议删除这个:
componentWillUpdate(nextProps, nextState)
localStorage.setItem('movieName', JSON.stringify(nextState));
改为在您的 handleSubmit 中执行存储更新逻辑
handleSubmit = (e) =>
console.log(`$this.state.movieName $this.state.ratings $this.state.duration`);
localStorage.setItem('movieName', JSON.stringify(nextState));
e.preventDefault();
【讨论】:
handleSubmit 会在每次提交触发时执行以下操作,会发生两件事 - 1. 为下一次输入清除表单 2. 数据存储在 localStorage 中以上是关于这是在 localStorage 中存储数据列表并在使用 React 应用程序搜索时显示它们的最佳方式的主要内容,如果未能解决你的问题,请参考以下文章
前端本地存储的 3 种方法 cookie、localStorage、sessionStorage