我如何添加隐藏的笔记在Mongoose(用于mongodb)中使用MERN堆栈制作的笔记应用程序中的功能

bwitn5fc  于 2023-05-23  发布在  Go
关注(0)|答案(2)|浏览(157)

我想添加一个隐藏的笔记funcionality,其中当我点击隐藏笔记按钮的说明应该从那个地方删除,并获得添加到隐藏的笔记,当我点击隐藏的笔记,我应该看到他们,甚至可以选择取消隐藏它,请帮助,
这是我目前做的网页(隐藏注解的按钮在所有注解下拉列表中):
(https://i.stack.imgur.com/Pm3Dx.png)(https://i.stack.imgur.com/rr5OL.png)(https://i.stack.imgur.com/TEY07.png)(https://i.stack.imgur.com/wzKN8.png)
以下是到目前为止完成的notes应用程序的代码-(驱动文件),(没有node_modules,因为它非常重):
Code IN Drive
这是app.js:

import './App.css';
    import {
    BrowserRouter as Router,
    Routes,
    Route,
    Link
    } from "react-router-dom";
    import Navbar from './components/Navbar';
    import Home from './components/Home';
    import AddNote from "./components/AddNote"
    import About from './components/About';
    import NoteState from './context/notes/NoteState';
    import Alert from './components/Alert';
    import Footer from './components/Footer';
    import DropDown from './components/DropDown';
    
    function App() {
     return (
        <>
          <NoteState>
            <Router>
              <Navbar />
              <DropDown></DropDown>
              <div className="container">
               <Routes>
                  <Route exact path="/" element={<Home />} />
                  <Route exact path="/about" element={<About />} />
                  <Route exact path="/addnote" element={<AddNote/>} />
                </Routes>
              </div>
              <Alert message="This is amazing React course" />
              <Footer></Footer>
            </Router>
          </NoteState>
    
        </>
      );
    }

    export default App;

请帮帮忙

kognpnkq

kognpnkq1#

这取决于你想如何保存数据,我通常会写这样的逻辑:
1.获取要隐藏的项目的id
1.将项目id推到隐藏列表(保存到数据库)
1.在加载notes数据之前,应该根据隐藏列表中存储的id过滤掉id。

let currNotesData = notesData.filter((notes) => {
         return hiddenList.includes(notes) })

1.然后,您可以循环遍历currNotesData并呈现可用的组件。
还有更多的方法可以做到这一点

mw3dktmi

mw3dktmi2#

1.创建一个名为“notes”的表
1.1.该表应该有一个名为“isVisible”的字段。此字段的数据类型为布尔型,默认情况下,该值设置为true。
1.创建一个API来改变笔记的可见性,方法应该是“PATCH”。
1.创建一个API来获取所有笔记的列表。在请求参数中,你必须添加一个参数,即isVisible,并且基于参数的值,API将返回数据。
例如,如果你想显示所有隐藏的笔记,那么你的后端URL将像http://localhost:3000/api/notes?isVisible=false

相关问题