React onClick带参Dispatch事件处理 单条查询返回全部列表问题求解

• 你当前的点击逻辑仅执行了路由跳转，没有触发getWorker的action请求，如果详情页直接复用了存储全量列表的state.items字段，自然会拿到全量数据
• 若确认已经发起getWorker请求但返回全量数据，按以下优先级排查：
  1. 打印axios请求的完整url，确认/worker/${id}中的id参数拼接正确，没有传空、传错
  2. 若参数无误，则是后端接口逻辑错误，未按传入id过滤返回对应单条数据
• 额外语法错误：你的列表组件参数写法有误，函数组件仅第一个参数为props对象，function ServiceProvidersList({ data, getServiceProviders }, props) 会导致无法正确获取classes和后续新增的action方法。

推荐两种实现方式，可根据业务场景选择：

方案1：列表页点击时发起请求，完成后跳转 #

适合数据量小、对跳转后加载速度要求高的场景：

1. 首先修改mapDispatchToProps，新增getWorker的dispatch映射：

const mapDispatchToProps = dispatch => {
  return {
    getServiceProviders: () => dispatch(getServiceProviders()),
    // 新增单条数据请求的映射
    getWorker: (id) => dispatch(getWorker(id))
  }
}

2. 修正组件参数定义，修改点击逻辑：

// 修正组件参数，所有props都在第一个对象解构
function ServiceProvidersList({ data, getServiceProviders, getWorker, classes }) {
  let history = useHistory();

  useEffect(() => {
    getServiceProviders();
  }, [getServiceProviders]);

  const handleClick = (id) => async (e) => {
    console.log("here", id);
    // 先发起单条数据请求
    await getWorker(id);
    // 请求完成后再跳转
    history.push(`/admin/service-provider/${id}`);
  }

  // 其余渲染逻辑不变
}

方案2：跳转后在详情页发起请求（更推荐） #

支持用户直接访问详情页链接，也避免请求失败导致跳转阻塞：

1. 列表页无需修改点击逻辑，保持仅跳转路由即可
2. 在详情页组件中获取路由id，发起请求：

import { useParams } from 'react-router-dom'
import { connect } from 'react-redux'
import { getWorker } from '你的action文件路径'

function WorkerDetail({ workerProfile, getWorker }) {
  // 从路由参数中获取id
  const { id } = useParams()

  useEffect(() => {
    // 页面挂载/ id变化时发起单条数据请求
    getWorker(id)
  }, [id, getWorker])

  // 渲染你的详情内容即可
  return <div>{workerProfile?.user?.first_name} {workerProfile?.user?.last_name}</div>
}

const mapStateToProps = state => ({
  // 从store中取单独存储的单条详情数据
  workerProfile: state.workerProfile
})

const mapDispatchToProps = dispatch => ({
  getWorker: (id) => dispatch(getWorker(id))
})

export default connect(mapStateToProps, mapDispatchToProps)(WorkerDetail)

额外注意：Reducer逻辑修正 #

你需要在对应的reducer中，单独存储单条详情数据，不要和全量列表字段混淆：

const initialState = {
  items: [], // 原全量列表存储字段
  isLoading: false,
  workerProfile: {} // 新增单条详情存储字段
}

export default function(state = initialState, action) {
  switch(action.type) {
    case WORKER_PROFILE_SUCCESS:
      return {
        ...state,
        // 将请求返回的单条数据存入单独字段
        workerProfile: action.payload
      }
    // 其余你的原有action处理逻辑不变
    default:
      return state
  }
}

内容的提问来源于stack exchange，提问作者tharnos_nos