记录react实现选择框一二级联动出现的问题

需求：用户在选择第一个选择框的选项后，第二个选择框的选项会根据第一个选择框的选择动态更新。如图所示

在这里插入图片描述

出现的问题

一级分类选择之后二级分类没有数据，第二次重新选择一级分类的时候，二级分类就会有值。

第一次点击截图：

在这里插入图片描述

第二次点击截图：

在这里插入图片描述

解决方法

因为之前的代码使用我们自己封装的ProTable组件，最后没有使用组件，而是直接使用ProTable，没有报错

代码如下：

const HeadSlideManager = () => {// 其他部分省略const [firstClassify, setFirstClassify] = useState([]);//一级分类const [secondClassify, setSecondClassify] = useState([]);//二级分类const [valueEnumList, setValueEnumList] = useState([]);//二级分类所有数据useEffect(() => {const fetchData = async () => {try {// const res = await getClassify(1) 请求一级分类数据const res = await API.getFirstClassify();if (res.code === 0) {setFirstClassify(res.data.map(item => ({ value: item.id, label: item.name })))} else {console.error('Error fetching data:', res.message);}// const res = await getClassify(2) 请求二级分类数据const ress = await API.getSecondClassify();if (ress.code === 0) {setValueEnumList(ress.data) // 保存二级分类所有数据} else {console.error('Error fetching data:', res.message);}} catch (error) {console.error('Error fetching data:', error);}}fetchData();}, [])const handleFirstClassifyChange = (value) => {setTimeout(() => {// 设置具体的二级分类数据，也就是根据一级分类定二级分类setSecondClassify(valueEnumList.filter(item => item.pid === value).map(item => ({ value: item.id, label: item.name })))}, 10)}const columns = [{title: <FormattedMessage id="pages.cms.table.video.head.slide.classify.1" />,dataIndex: 'first_classify',ellipsis: true,align: 'center',valueType: 'select', // 表单搜索设置为选择框fieldProps: {options: firstClassify,onChange: handleFirstClassifyChange,},},{title: <FormattedMessage id="pages.cms.table.video.head.slide.classify.2" />,dataIndex: 'second_classify',ellipsis: true,align: 'center',valueType: 'select',fieldProps: {options: secondClassify,},},]return (<PageHeaderWrapper ghost={false}><div><ProTablecolumns={columns}rowKey="id"options={false}request={API.videoHeadSlide}pagination={{pageSize: 10,current: 1,showSizeChanger: true,showQuickJumper: true,pageSizeOptions: [10, 20, 30]}}toolBarRender={() => [addButton]}scroll={{ x: 'max-content' }}/></div></PageHeaderWrapper>);
};
export default HeadSlideManager;

我们封装的ProTable组件

const PaginationTable = ({request: defaultRequest,onChange,pagination: defaultPagination,params: defaultParams,columns: defaultColumns,form: defaultForm,queryTransfer,actionRef: defaultAction,...props
}) => {const aRef = useRef();const actionRef = defaultAction || aRef;const [first, setFirst] = useState(true); // 第一次进入页面const [pagination, setPagination] = useState({pageSize: Number(history.location.query.size || 10),current: Number(history.location.query.page || 1),showQuickJumper: true,size: 'default',...defaultPagination,});const [lastSorter, setLastSorter] = useState(history.location.query.sort || history.location.query.sort_by? {sort: history.location.query.sort,sort_by: history.location.query.sort_by,}: undefined,);const correctQuery = ({ page = 1, size = 10, ...other }) => {setPagination({ ...pagination, current: page, pageSize: size });history.replace({ query: { page, size, ...other } });};const request = async ({ current, pageSize: size, ...p }, rSorter, filter) => {setFirst(false);let page = current;if (first) {// fix: 第一次进入页面表单提交导致page变1page = pagination.current;if (actionRef.current?.pageInfo) actionRef.current.pageInfo.current = page;}let sorter;if (rSorter) {const keys = Object.keys(rSorter);if (keys.length > 0) {sorter = { sort: { ascend: '1', descend: '-1' }[rSorter[keys[0]]], sort_by: keys[0] };}}setLastSorter(sorter);if (!simpleIsSame(lastSorter, sorter)) {page = 1;}const notEmptyParams = { ...p, page, size };Object.keys(notEmptyParams).forEach((key) => {const val = notEmptyParams[key];if (val === null || val === undefined || val.toString().length === 0) {delete notEmptyParams[key];}});correctQuery({ ...notEmptyParams, ...sorter });if (defaultRequest) {const res = await defaultRequest({ ...notEmptyParams, ...sorter, ...filter });if (res.code === 0) {const total = typeof res.total === 'number' ? res.total : 0;if (!res.data?.length) {let prevPage = page - 1;if (typeof res.total === 'number') {const totalPage = Math.ceil(res.total / size);if (prevPage > totalPage) prevPage = totalPage;}if (page > 1) page = prevPage;}setPagination((currentPg) => ({ ...currentPg, current: page, total }));}return res;}return { success: false, data: [] };};// query由form, sorter, pagination和params组成const getFormAndParamsFromQuery = () => {const { page, size, sort, sort_by: sortBy, ...query } = history.location.query;Object.keys(query).forEach((q) => {if (query[q] === '') {query[q] = undefined;}});return query;};const [form] = Form.useForm();const [params, setParams] = useState(defaultParams);useEffect(() => {const queryParams = getFormAndParamsFromQuery();if (first) {// 第一次进入设置表单数据let fieldsValue;if (queryTransfer) {fieldsValue = queryTransfer(queryParams);} else {fieldsValue = {};Object.keys(queryParams).forEach((k) => {if (defaultColumns?.find((c) => c.dataIndex === k)) fieldsValue[k] = queryParams[k];});}if (fieldsValue && Object.keys(fieldsValue).length > 0) {form?.setFieldsValue(fieldsValue);form?.submit(); // page会变1}} else {// 参数修改后设置页数为1let same;if (!defaultParams) same = false;elsesame = Object.keys(defaultParams).every((k) => {if (queryParams[k] === defaultParams[k]) return true;if (Array.isArray(defaultParams[k]) && typeof queryParams[k] === 'string')return defaultParams[k].length === 1 && defaultParams[k][0] === queryParams[k];if (Array.isArray(defaultParams[k]) && Array.isArray(queryParams[k]))return defaultParams[k].join(',') === queryParams[k].join(',');return false;});if (!same) setPagination({ ...pagination, current: 1 });}setParams(defaultParams);}, [defaultParams]);const columns = useMemo(() => {const { query } = history.location;if (query.sort_by)return defaultColumns.map((v) => {if (v.sorter && query.sort_by === v.dataIndex) {return { ...v, defaultSortOrder: { 1: 'ascend', '-1': 'descend' }[query.sort] };}return { ...v, defaultSortOrder: undefined };});return defaultColumns;}, [defaultColumns]);return (<ProTableparams={params}request={request}onChange={(tPagination, filter, sorter, extra) => {setPagination(tPagination);if (onChange) onChange(tPagination, filter, sorter, extra);}}actionRef={actionRef}form={{ form, autoFocusFirstInput: false, ...defaultForm }}pagination={pagination.current === 0 ? undefined : pagination}columns={columns}search={{ defaultCollapsed: false }}tableAlertRender={false}revalidateOnFocus={false}{...props}/>);
};export default PaginationTable;

错误分析过程

通过查看第一次点击截图，我发现第一次valueEnumList没有值，第二次选择一级分类的时候valueEnumList有值，所以我首先怀疑是这段代码引起的问题，因为在React中setXxx方法是一个异步函数，可能导致在 handleFirstClassifyChange 函数中的 valueEnumList 并没有及时更新到最新的状态。

seEffect(() => {const fetchData = async () => {try {const ress = await API.getSecondClassify();if (ress.code === 0) {// 这行代码引发问题setValueEnumList(ress.data) // } else {console.error('Error fetching data:', res.message);}} catch (error) {console.error('Error fetching data:', error);}}fetchData();
}, [])

最后根据百度，gpt提示，使用 useEffect 来监听 valueEnumList 的变化，并在变化后更新 secondClassify 的状态，同时使用函数式更新来设置 secondClassify 状态。函数式更新可以确保在设置状态时访问到的状态是最新的。也就是添加下面的代码

// 监听 valueEnumList 变化，更新 secondClassify
useEffect(() => {// 默认第一个选择框的值为空，第二个选择框也应该为空setSecondClassify([]);
}, [valueEnumList]);
const handleFirstClassifyChange = (value) => {// 使用函数式更新确保访问到的 valueEnumList 是最新的状态setSecondClassify(prevSecondClassify => {// 根据第一个选择框的值筛选出第二个选择框的选项return valueEnumList.filter(item => item.pid === value).map(item => ({ value: item.id, label: item.name }));});
};

添加之后还是不行，最后试了各种方法，一句话就是不行。

讲讲最后为什么突然使用原生的ProTable，而没有使用封装的ProTable(* 原理还没有弄明白)

前面自己百度，gpt那么多，都没有解决，只好找博士师兄帮忙，师兄也是研究了很长时间，最后不知道为什么点到封装的ProTable组件页面，就从头到尾看了一遍代码，然后就怀疑是useMemo这个Hooks影响的，最后就尝试使用原生的ProTable，然后发现就没有问题了。师兄就忙自己的事了。

const columns = useMemo(() => {const { query } = history.location;if (query.sort_by)return defaultColumns.map((v) => {if (v.sorter && query.sort_by === v.dataIndex) {return { ...v, defaultSortOrder: { 1: 'ascend', '-1': 'descend' }[query.sort] };}return { ...v, defaultSortOrder: undefined };});return defaultColumns;
}, [defaultColumns]);