这是在 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 应用程序搜索时显示它们的最佳方式的主要内容,如果未能解决你的问题,请参考以下文章

从本地存储中一一检索数组列表

使用QML LocalStorage来存储我们的数据

前端本地存储的 3 种方法 cookie、localStorage、sessionStorage

Web存储机制—sessionStorage,localStorage使用方法

h5-localStorage储存的使用

Vuex/Vuejs:在 vuex 存储中访问 localStorage