使用反应从表onClick过滤元素

Question

如果用户单击任何表格行，则会弹出一个模式并显示有关所单击行的更多详细信息，我有一个显示动态数据的表格，在该模式上，用户有两个选项，一个是查看full details 将他重定向到一个页面，其中包含单击的行的完整详细信息，另一个隐藏该行。

我尝试对从 API 获取的数据使用过滤器方法，但没有成功我将如何继续实现此功能。非常感谢任何帮助。

这是我使用的代码：

import React, { useEffect, useState } from 'react';
import axios from 'axios';
import BootStrapTable from "react-bootstrap-table-next"
import paginationFactory from 'react-bootstrap-table2-paginator';
import {Modal , Button} from "react-bootstrap"
import { useHistory } from "react-router-dom";
import Footer from "./Footer"

export default function DataTable (){
    const history = useHistory();
    const [companies,setCompanies] = useState([]);
    const [modalInfo,setModalInfo] = useState([]);
    // eslint-disable-next-line
    const [showModal,setShowModal] = useState(false);
    const [show ,setShow] = useState(false);
    const handleCLose = () => setShow(false)
    const handleShow = () => setShow(true)
    const getCompaniesData = async () =>{
        try{
            const data = await axios.get("http://localhost:5000/companies")
            setCompanies(data.data)
        }
        catch(e){
            console.log(e)
        }
    }
    useEffect(()=>{
        getCompaniesData();
    },[])
    const columns = [
        {dataField:"id",text:"id"},
        {dataField:"name",text:"name"},
     
    ]
    const rowEvents = {
        onClick : (e,row)=>{
            console.log(row)
            setModalInfo(row)
            toggleTrueFalse()
            
        }
    }
    const toggleTrueFalse = () =>{
        setShowModal(handleShow);
    }
    const handleDetails = () =>{
        history.replace('/details', {details:modalInfo})
    }

 function handleHide (mid) {
    return companies.filter((item) => {
      return item.id === mid;
    });
  };

    const ModalContent = () =>{
     return (   <Modal show={show} onHide={handleCLose}>
<Modal.Header closeButton>
    <Modal.Title>
        
  {modalInfo.name}
    </Modal.Title>
</Modal.Header>
<Modal.Body>
<h1 >Company Details :</h1>
<ul>
     <ol>source_id : {modalInfo.source_id}</ol>
     <ol>source_name : {modalInfo.source_name}</ol>
     <ol>name : {modalInfo.name}</ol>
     <ol>city : {modalInfo.city}</ol>
     <ol>country : {modalInfo.country}</ol>
</ul>
</Modal.Body>
<Modal.Footer>

    <Button variant="secondary" onClick={handleDetails}>Full Details</Button>
    <Button className="btn btn-danger" variant="secondary" onClick={handleHide(modalInfo.id)}>Hide Element</Button>
</Modal.Footer>
        </Modal> )
    }
    return (
        <div>
        <h1 className="text-center">Share-work Data Table</h1>
        <div className="table-back">
        <BootStrapTable
        keyField="id"
        data={companies}
        columns={columns}
        pagination={paginationFactory()}
        rowEvents = {rowEvents}
        />
          <Footer/>
        </div>
       
        {show ? <ModalContent/> : null}
      
        </div>
    )
}

Answer 1

您需要实际更新状态。

而不是这个：

 function handleHide (mid) {
    return companies.filter((item) => {
      return item.id === mid;
    });
  };

使用您在上面定义的 setCompanies 函数更新状态 (const [companies,setCompanies] = useState([]);)

你的代码应该是这样的：

 function handleHide (mid) {
    setCompanies(companies.filter((item) => {
      return item.id === mid;
    }));
  };