如何从动态 Table 访问数据

Question

目前正在学习编码，我在这里做了一些工作...

使用 MongoDB 我将一些数据（交易）硬编码到前端的 table 中。

除此之外，我创建了一个名为 TransactionItems 的 js 文件，并像这样列出了感兴趣的属性。

import React   from 'react';
import {Badge} from "reactstrap";




  const TransactionItem = props =>{

  
    return (

     

    <>
       
      <td>{props.transaction.date}</td>
      <td> {props.transaction.amount}</td>
      <td>{props.transaction.token}</td>
      <td>{props.transaction._id}</td>
  
      <td className="text-right"><Badge color="warning"  >
        View
      </Badge>
      </td> 
    </>
    )
}

export default TransactionItem;

我还创建了一个连接到我的后端的服务

getTransactions : ()=>{
        return fetch('/user/transactions')
                .then(response=>{
                    if(response.status !== 401){
                        return response.json().then(data => data);
                    }
                    else
                        return {message : {msgBody : "UnAuthorized",msgError : true}};
                });
    },

然后在我的仪表板上，我用这样的数据填充了一个 table

import React, {useEffect, useState} from 'react';

import TransactionItem from '../views/TransactionItems';
import TransactionService from '../Services/TransactionService';
import { Col, Row, Card, CardTitle, CardText, CardBody, CardFooter, CardHeader, Button, Table } from 'reactstrap';




const Dashboard = props=>{
  const [user,setUser] = useState([]);
  const [transactions,setTransactions] = useState([]);


  
 

  useEffect(()=>{
        TransactionService.getTransactions().then(data =>{
            setTransactions(data.transactions);
        
        });
      },[]);








    
  return (
 
    <>
      
                <Table responsive>
                  <thead className=" text-warning">
                    <tr>
                      <th>
                        Date
                      </th>
                      <th>
                        Amount
                      </th>
                      <th>
                        Token
                      </th>
                      <th>
                        Receipt No
                      </th>
                      <th className="text-right">
                        Action
                      </th>
                    </tr>
                  </thead>
                  <tbody>
                     {
                                transactions.map(transaction  =>{
                                    return  (<tr><TransactionItem key={transaction._id} transaction={transaction} loading={loading}/>

                                             </tr>)
                                })
                            }
                  </tbody>
                </Table>
        

      </>
  );
}

export default Dashboard;

填充后看起来像这样

我为每笔交易创建了收据样本

import React, {useEffect, useState}from 'react';
import {Row, Container} from "reactstrap";
import AuthService from '../Services/AuthService';
import TransactionService from '../Services/TransactionService';

 


function Receipt(props) {

  const [user,setUser] = useState([]);
  const [transaction,setTransaction] = useState();
  
  const id = ''; 

  useEffect(()=>{
    AuthService.isAuthenticated().then(data =>{
     setUser(data.user);
     });
   },[]);


useEffect(()=>{
     TransactionService.getTransaction(id).then(data =>{
      console.log(data);
         setTransaction(data.transaction);
     });
   },[id]);



    return (
        <div>
            <>
      
                
                   <div style={{color: 'RGB(128, 128, 128)', fontSize: '1rem', 
                        fontWeight: '600', 
                        textAlign: 'left',
                        justifyContent: 'center',  
                        alignContent: 'center'}}>Token Credit:</div>
             
            </>  
   
        </div>
    );
}

export default Receipt;

并在后端创建路由以使用交易 _id 访问每个交易对象。我试图通过在前端为此创建一个服务来执行它

getTransaction : (id)=>{
        return fetch('/user/'+id)
      
                .then(response=>{
                    console.log(response.data);
                    if(response.status !== 401){
                        return response.json().then(data => data);
                    }
                    else
                        return {message : {msgBody : "UnAuthorized",msgError : true}};
                });
    },

}

当使用已知的 transaction_id 进行测试时，它起作用了（我控制台记录了响应）。但我不确定如何为 table 上的每笔交易传递 _id，以便在单击查看按钮时打开收据页面并将收据页面上的状态 ID 设置为 transaction_id事务对象，使用 UseEffect。

任何指针都将是最有帮助的。谢谢

Answer 1

嗨，

您可以将 _id 传递给本地存储。在视图中单击操作，将 _id 信息保存在本地存储中并重定向到收据页面。在收据页面中，像这样从本地存储中获取 _id。

// setter
localStorage.setItem('myData', data);

// getter
localStorage.getItem('myData');

// remove
localStorage.removeItem('myData');

现在看这个例子：

import React, { Component } from 'react'

class Table extends Component {
   constructor(props) {
      super(props) 
      this.state = {
         students: [
            { id: 1, name: 'Wasif', age: 21, email: 'wasif@email.com' },
            { id: 2, name: 'Ali', age: 19, email: 'ali@email.com' },
            { id: 3, name: 'Saad', age: 16, email: 'saad@email.com' },
            { id: 4, name: 'Asad', age: 25, email: 'asad@email.com' }
         ]
      }
   }

   viewRow(id,e) {
     alert('selectedId:'+ id);
     localStorage.setItem('transactionId',id);
    }


   renderTableData() {
      return this.state.students.map((student, index) => {
         const { id, name, age, email } = student //destructuring
         return (
            <tr key={id}>
               <td>{id}</td>
               <td>{name}</td>
               <td>{age}</td>
               <td>{email}</td>
               <td><button onClick={(e) => this.viewRow(id, e)}>View</button></td>
            </tr>
         )
      })
   }


   render() { 
      return (
         <div>
            <h1 id='title'>React Dynamic Table</h1>
            <table id='students'>
               <tbody>
                  {this.renderTableData()}
               </tbody>
            </table>
         </div>
      )
   }
}

export default Table;

我在 table 中添加了视图按钮，还添加了 viewRow 方法。单击按钮时，我获取 selectedRow id 并保存在本地存储中。

Answer 2

这里是有效的解决方案

第一步引入 useHistory 钩子

import { useHistory} from 'react-router-dom';

步骤 2 在 TransactionItem 对象中定义历史记录。

let history = useHistory();

步骤 3 还在内部 TransactionItem 对象中定义 viewRow。

const viewRow = (e) =>{
       e.preventDefault();
       history.push('/receipt/'+ props.transaction._id);
      };

如何从动态 Table 访问数据

How to access data from a dynamic Table

mongodb

reactjs

react-props

react-hooks

use-effect