这是在 localStorage 中存储数据列表并在使用 React 应用程序搜索时显示它们的最佳方式

Posted 2023-02-23

【中文标题】这是在 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 中