React-Redux：使用表格内的按钮将获取的 API 数据从组件发送到动态路由组件

问题描述

我正在使用 react-redux 构建一个应用程序，但有 3 个主要问题。在志愿者组件中，我从商店获取志愿者的数据，然后通过将数据和列（作为常量导入）传递给表格组件来将其显示在表格组件中。

志愿者组件：

import React,{Component} from 'react';
import { connect } from 'react-redux';
import { requestVolunteerData } from '../actions';
import { volenteerColumns as columns } from '../utils/constants';
import '../container/App.css';
import Table from '../components/Table/Table';
import Loading from '../components/Loading/Loading';
import {Link} from 'react-router-dom';

const mapStatetoProps = state => {
    return {
        entities: state.requestEntitiesReducer.entities,isPending: state.requestEntitiesReducer.isPending,error: state.requestEntitiesReducer.error
    }
}

const mapdispatchToProps = dispatch => {
    return {
        onRequestEntities: () => dispatch(requestVolunteerData())
    }
}

class Volenteer extends Component{
    
    componentDidMount () {
        this.props.onRequestEntities();
    }   
      
    render () {
        const { entities,isPending} = this.props;
        return isPending ?
            <Loading />
             :
            (
                <div className='tc'>
                    <h1 className='f1'>רשימת מתנדבים</h1>
                    <Table data={ entities } columns={ columns }/>  
                </div>
            );  
    }   
}

export default connect(mapStatetoProps,mapdispatchToProps)(Volenteer);

常量文件 - 包含 volenteerColumns :

 import {Link} from 'react-router-dom';
    // Types
    export const REQUEST_ENTITIES_PENDING = 'REQUEST_ENTITIES_PENDING';
    export const REQUEST_ENTITIES_SUCCES = 'REQUEST_ENTITIES_SUCCES';
    export const REQUEST_ENTITIES_Failed = 'REQUEST_ENTITIES_Failed';
    
// Columns

export const volenteerColumns = [{
    datafield: 'name',text: 'שם פרטי'
  },{
    datafield: 'name',text: 'שם משפחה'
  },{
    datafield: 'phone',text: 'עיר'
  },{
    datafield: 'yeshuv',text: 'כתובת'
  },text: 'מספר טלפון'
  },{
    datafield: 'area',text: 'איזור פעילות מועדף'
  },{
    datafield: 'occupation',text: 'תחום עיסוק'
  },{
    datafield: 'alertDonationInArea',text: 'התראה על תרומה באיזור'
  },{
    datafield: 'alertdonationNearBy',text: 'התראה על תרומה קרובה'
  },{
    datafield: 'status',text: 'סטטוס'
  },{
    datafield: 'bDate',text: 'תאריך יום הולדת'
  },{
    datafield: "_id",text: "פעולות",formatter: (rowContent,row) => {
      return (    
        <Link to={`/volenteerRoute/${_id}`}>
          <button className='btn btn-outline-primary btn lg'>view</button>
        </Link>
      )
    }
}];

它看起来像这样：

我想要的是当我点击查看按钮时，它会转到一条新路线：<Route path='/volenteerRoute/:id' component={VolenteerDetails} />

并将显示该特定志愿者的数据。 我的问题是：

1. 现在，如果可能的话（出于可读性原因和短代码），我想从外部文件导入志愿者列，这不是真正的常量......因为按钮应该指向动态路由， 那么如何通过单击查看按钮来更改我的路线？ 我知道我没有正确编写它（如何使用格式化程序）- 通过在外部文件中找到的那个按钮传递 te volenteer ID 的正确方法是什么？

2. 将志愿者的状态传递给 <Route path='/volenteerRoute/:id' component={VolenteerDetails} /> 的正确方法是什么，是否通过这样的链接：

    <Link to ={{pathname: "/volenteerRoute/:id",state: { volenteerDetails:  
     this.state.volenteerDetails}}} >
   

还是通过另一个 fetch API 调用的 redux 操作（首选）？如果是这样，我如何获取这些数据？这些是我的行动：

//volunteer
export const requestVolunteerData = () => getData('http://localhost:8000/api/volunteer');
export const requestOneVolunteerData = () =>  getData('http://localhost:8000/api/volunteer/:id');

调用 getData 函数：

import {
    REQUEST_ENTITIES_PENDING,REQUEST_ENTITIES_SUCCES,REQUEST_ENTITIES_Failed
} from './constants';
 
export const getData = (url) => (dispatch) => {
    dispatch ( {type: REQUEST_ENTITIES_PENDING} );
    fetch(url)
        .then ( response => response.json() )
        .then( resp => dispatch({type: REQUEST_ENTITIES_SUCCES,payload: resp.data }) )
        .catch(error => dispatch({type: REQUEST_ENTITIES_Failed,payload: error}) ) 
}

但当然第二个动作不起作用，因为我不知道如何将 ID 从视图按钮传递给该动作

3. VolenteerDetails（应该显示特定志愿者详细信息的组件）如何获取数据？是靠道具吗？

       const VolenteerDetails = ({ props}) => {
            console.log(props);
            return (
              <div>
                <h2>volenteer details </h2>
              </div>
          )
       }
   

抱歉这个问题太长，感谢您的帮助！！

解决方法

在 route.js 内添加：

<Route exact path='/volenteerRoute' component={Volenteer} />
<Route path='/volenteerRoute/:id' component={VolenteerDetails} />

表格视图按钮：

<Link to={{pathname: `/volenteerRoute/${item.id}`}}>View</Link>

您可以使用 react-router useParams() 获取点击视图的 ID。

VolenteerDetails.js：

const VolenteerDetails = ({ props }) => {
     let { id } = useParams();
     console.log(id);
     // with id you can fetch API or call action even read data from store
     ...
}

为VolenteerDetails采取行动：

export const requestOneVolunteerData = (id) =>  getData(`http://localhost:8000/api/volunteer/${id}`);

额外奖励：为了获得使用 redux 和路由的最佳体验，我更喜欢使用 connected-react-router