按 id 过滤数组 object - REACT

filtering object of array by id - REACT

我很难通过 React 中的 ID 过滤 object 数组的 object。让我解释一下:

该应用程序是一个笔记应用程序,它存储您创建的每条笔记及其标题、文本(名称)和创建日期。关键是ID。

现在我尝试在每次单击笔记时创建一个弹出模式,我成功地做到了,除了一件事:当模式出现时,它不仅显示选定的笔记,而且所有笔记列表。我试过用不同的数组方法来过滤我需要的笔记,但没有成功。

这是 App.js 文件:

import React, { useState } from 'react';
import './App.css';
import Form from './components/Form';
import List from './components/List';
import { v4 as uuidv4 } from 'uuid';
import Modal from 'react-modal';
import ModalList from './components/ModalList';


Modal.setAppElement('#root');

function App() {
  /*HOOKS */

  const [list, setList] = useState([]);
  const [modalList, setModalList] = useState([]);


  //for modal:
  let subtitle;
  const [modalIsOpen, setIsOpen] = React.useState(false);




  /*FUNCTIONS */

  //add new notes
  function handleAdd(title, name) {
    if (name) {
      const newList = list.concat({ title: title, name: name, id: uuidv4(), date: getCurrentDate() });
      setList(newList);
      console.log(newList);
      const newModalList = list.concat({ title: title, name: name, id: uuidv4(), date: getCurrentDate() });
      setModalList(newModalList);
    }
    else { alert("You should complete the notes field") }

  }


  //get the date for adding the note
  function getCurrentDate() {

    let newDate = new Date()
    let date = newDate.getDate();
    let month = newDate.getMonth() + 1;
    let year = newDate.getFullYear();
    let hours = newDate.getHours();
    let minutes = newDate.getMinutes();

    return `${month < 10 ? `0${month}` : `${month}`}/${date}/${year}, ${hours}:${minutes < 10 ? `0${minutes}` : `${minutes}`} hs.`

  }


  //deleting a note
  function del(x) {
    if (window.confirm("Do you really want to delete this item? The action is permanent.")) {
      const newList = list.filter((item) => item.id !== x);
      setList(newList);
    }
  }



  //opening a modal
  function openModal() {

    setIsOpen(true);
  }

  //after opening a modal
  function afterOpenModal() {
    // references are now sync'd and can be accessed.
    subtitle.style.color = '#f00';

  }

  //closing a modal
  function closeModal() {
    setIsOpen(false);

  }


  /*APP */
  return (
    <>

      <div>
        {/* MODAL */}
        <Modal
          isOpen={modalIsOpen}
          onAfterOpen={afterOpenModal}
          onRequestClose={closeModal}
          style={customStyles}
          contentLabel="Example Modal"
        >
          {modalList.map((item) => { return <ModalList key={item.id} item={item} quit={closeModal} /> })}
        </Modal>
      </div>

      {/* FORM */}


      <div className='App'>
        <Form handleNew={handleAdd} />
      </div>

      {/* NOTES LIST */}
      <div className='notes-list'>
        {list.map((item) => { return <List key={item.id} item={item} quit={del} addModal={openModal} /> })}
      </div>

    </>
  );
}

export default App;



这是 ModalList.jsx 文件:

const ModalList = (props) => {
    const { item, quit} = props;

    /*LIST */
    return (
        <li ><button className='delete' onClick={()=>quit(item.id)}>x</button><p className='note-title'>{item.title}</p><p>{item.date}</p><p className='note-name'>{item.name}</p> </li>


    );
}
 
export default ModalList;

我知道我必须以某种方式通过其 ID 过滤 object 以便仅显示我单击的内容而不是列表中的所有现有元素,但我找不到方法。

非常感谢!

{list.map((item) => { return <List key={item.id} item={item} quit={del} addModal={openModal} /> })}

openModal需要把你点击的item作为参数传递给回调

类似于:

{list.map((item) => { return <List key={item.id} item={item} quit={del} addModal={() => openModal(item)} /> })}

然后openModal函数需要将该参数传递给Modal组件。为此,您可以将其存储在 modalList 中,例如通过 setModalList([item])

您在这里使用的是 Array.map,它正在做它应该做的事情(列出项目),而不是您应该使用 Array.filter,这将 return 您需要的 ModalItem