前端API端点接收后端districtId时出现undefined问题

问题根源 #

1. 组件接收的district props未同步到districtId状态，初始值硬编码为1，导致请求API时用的不是实际传入的区域ID，自然返回undefined
2. useEffect依赖为空数组，仅在组件初始化时请求一次数据，后续区域变更不会触发重新请求
3. 表格数据源错误引用了Context中的households，而非组件自身维护的状态
4. 分页切换时未携带当前区域ID，会导致页码切换后请求错误的区域数据

修正后的代码 #

import { Link } from "react-router-dom";
import React, { useEffect, useState, useContext } from "react";
import { Table, Spin, Alert } from "antd";
import axios from "axios";
import AppContext from "../context/appContext";

const Households = ({ history, district }) => {
  const clients = useContext(AppContext);

  const [totalPages, setTotalPages] = useState(1);
  const [households, setHouseholds] = useState([]); // 统一变量命名，避免混淆
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);
  // 从传入的district初始化ID，处理district为undefined的边界情况
  const [districtId, setDistrictId] = useState(district?.district_id || 1);

  // 监听district变化，同步更新区域ID
  useEffect(() => {
    if (district?.district_id) {
      setDistrictId(district.district_id);
    }
  }, [district]);

  // 监听区域ID变化，自动触发数据请求
  useEffect(() => {
    fetchHouseholds();
  }, [districtId]);

  const fetchHouseholds = async (page = 1) => {
    setLoading(true);
    try {
      const res = await axios.get(
        `${process.env.REACT_APP_SERVER}/household/district/${districtId}`,
        { params: { page } } // 传递分页参数给后端
      );
      setHouseholds(res.data.data);
      setTotalPages(res.data.totalPages);
      setError(null);
    } catch (err) {
      console.error(err);
      setError(err.message || "获取住户数据失败");
    } finally {
      setLoading(false);
    }
  };

  const columns = [
    {
      title: '已筛查',
      dataIndex: 'screened',
      render: (value) => (
        <a className="btn btn-link btn-success btn-just-icon like">
          <i className="material-icons">{value === true ? "check" : "close"}</i>
        </a>
      ),
    },
    {
      title: '机构',
      dataIndex: 'facility',
    },
    {
      title: '住户ID',
      dataIndex: 'household_id',
    },
    {
      title: '照料者',
      dataIndex: 'caregiver_name',
    },
    {
      title: '个案工作者',
      dataIndex: 'caseworker_name',
    },
    {
      title: '个案工作者电话',
      dataIndex: 'phone',
    },
    {
      title: '最后编辑时间',
      dataIndex: 'dateEdited',
    },
    {
      title: '',
      render: (_, record) => (
        <Link to={`/household/${record.key}`} className="btn btn-link btn-info btn-just-icon like">
          <i className="material-icons">visibility</i>
        </Link>
      ),
    },
  ];

  const data = households?.map((house) => ({
    key: house.json._id,
    screened: house.json.attributes.screened,
    facility: house.json.attributes.facility,
    household_id: house.json.attributes.household_id,
    caregiver_name: house.json.attributes.caregiver_name,
    caseworker_name: house.json.attributes.caseworker_name,
    phone: house.json.attributes.phone,
    dateEdited: house.json.attributes.dateEdited,
  }));

  return (
    <>
      <div className="card">
        <div className="card-header-info">
          <h4 className="card-title ">住户列表</h4>
        </div>
        <div className="card-body">
          {loading ? (
            <Spin />
          ) : error ? (
            <Alert message={error} type="error" />
          ) : (
            <Table
              columns={columns}
              dataSource={data}
              rowKey="key" // 对应data里的key字段，避免ID匹配错误
              onRow={(record) => ({
                onClick: () => history.push(`/household/${record.key}`),
              })}
              loading={loading}
              pagination={{
                pageSize: 10,
                total: totalPages,
                onChange: (page) => fetchHouseholds(page),
              }}
            />
          )}
        </div>
      </div>
    </>
  );
};

export default Households;

关键修改说明 #

• 同步区域ID：从传入的district中提取district_id初始化状态，同时监听district变化自动更新ID
• 自动重新请求：把districtId加入useEffect依赖，区域变更时自动触发数据拉取
• 修正数据源：表格使用组件内维护的households状态，确保展示最新请求的区域数据
• 完善分页逻辑：分页时传递页码参数，同时保留当前区域ID，避免分页时丢失区域信息
• 边界处理：初始化时判断district是否存在，避免undefined报错
• 代码规范：统一变量命名，优化错误提示，修正表格行键匹配逻辑

内容的提问来源于stack exchange，提问作者Bright Mafungautsi Kapamulomo