React里使用Select组件的Onchange无法获取全局变量的值，怎么解决？-灵析社区

import React, { useRef, useState, useEffect, useCallback } from 'react'; import { Button, Card, Modal, Result, Progress, Space, Upload, Form, Popconfirm, Select, Input } from 'antd'; import { FileExcelOutlined } from '@ant-design/icons'; import { authService } from '@apps/services'; import { getDemandStoreGetShelvesImportTemplate, postSupportDictTypeList } from '@apps/apis'; import styles from './equipment.less'; const Equipment = (props) => { const { fetchdata, currentRef } = props; const [form] = Form.useForm(); const [importModal, setImportModal] = useState(false); const [modalStep, setModalStep] = useState(0); const { accessToken, memberId, memberRoleId } = authService.getAuth() || {}; const [step1DescriptState, setStep1DescriptState] = useState(null); const [exceptionContent, setExceptionContent] = useState(''); const [exceptionCheck, setExceptionCheck] = useState(false); // 默认无异常 const [loading, setLoading] = useState(false); const [tdata, settdata] = useState([]); const ref = useRef({}); const [storeShelvesListbrand, setstoreShelvesListbrand] = useState([]); const [storeShelvesListregion, setstoreShelvesListregion] = useState([]); const [storeShelvesListshelvesType, setstoreShelvesListshelvesType] = useState([]); useEffect(() => { const fetchData = async () => { const params = { dictTypes: ['storeShelvesListbrand', 'storeShelvesListregion', 'storeShelvesListshelvesType'] }; const res = await postSupportDictTypeList(params, { ctlType: 'none' }); if (res.code === 1000) { const brandList = [], regionList = [], shelvesTypeList = []; res.data.forEach((ele) => { if (ele.dictType === 'storeShelvesListbrand') { ele.dictDataList.forEach((ele2) => { brandList.push({ value: ele2.dictValue, label: ele2.dictLabel }); }); setstoreShelvesListbrand([...brandList]); } else if (ele.dictType === 'storeShelvesListregion') { ele.dictDataList.forEach((ele2) => { regionList.push({ value: ele2.dictValue, label: ele2.dictLabel }); }); setstoreShelvesListregion([...regionList]); } else if (ele.dictType === 'storeShelvesListshelvesType') { ele.dictDataList.forEach((ele2) => { shelvesTypeList.push({ value: ele2.dictValue, label: ele2.dictLabel }); }); setstoreShelvesListshelvesType([...shelvesTypeList]); } }); } }; fetchData(); }, []); useEffect(() => { if (fetchdata.length > 0) { settdata([...fetchdata]); } }, [fetchdata]); const onCellChange = useCallback((value, type, idx) => { const newData = [...tdata]; if (type === 1) { newData[idx]['brandKey'] = value; const brand = storeShelvesListbrand.find(ele => ele.value === value); newData[idx]['brand'] = brand ? brand.label : ''; } else if (type === 2) { newData[idx]['regionKey'] = value; const region = storeShelvesListregion.find(ele => ele.value === value); newData[idx]['region'] = region ? region.label : ''; } else if (type === 3) { newData[idx]['shelvesTypeKey'] = value; const shelvesType = storeShelvesListshelvesType.find(ele => ele.value === value); newData[idx]['shelvesType'] = shelvesType ? shelvesType.label : ''; } settdata(newData); }, [tdata, storeShelvesListbrand, storeShelvesListregion, storeShelvesListshelvesType]); const defaultColumns = [ { title: '品牌', dataIndex: 'brand', render: (text, record, index) => ( onCellChange(value, 1, index)} options={storeShelvesListbrand} /> ) }, { title: '区域', dataIndex: 'region', render: (text, record, index) => ( onCellChange(value, 2, index)} options={storeShelvesListregion} /> ) }, { title: '器架类型', dataIndex: 'shelvesType', render: (text, record, index) => ( onCellChange(value, 3, index)} options={storeShelvesListshelvesType} /> ) }, { title: '数量', dataIndex: 'num', render: (text, record, index) => ( onCellChange(e.target.value, 3, index)} /> ) }, { title: '操作', dataIndex: 'action', render: (_, record) => ( handleDelete(record.id)} > 删除 ), } ]; const handleCancel = () => { setImportModal(false); setModalStep(0); setExceptionCheck(false); setExceptionContent(''); }; const modalLoadTemplate = () => { let a = document.createElement('a'); document.body.appendChild(a); a.style = 'display: none'; getDemandStoreGetShelvesImportTemplate({}, { responseType: 'blob', getResponse: true }).then((res) => { const { response } = res; const filename = response.headers.get('content-disposition').split('=')[1]; let blob = new Blob([response.data], { type: 'application/vnd.ms-excel' }); const url = window.URL.createObjectURL(blob); a.href = url; a.download = filename.replaceAll('"', ''); a.click(); window.URL.revokeObjectURL(url); }); }; const step0Description = ( 点击下载 EXCEL文件模板 下载模板 按照模板整理器架信息资料 点击导入按钮，导入整理好的器架信息资料 单次最多导入1000条，文件大小不能超过10M ); const step1Exception = ( 存在错误格式数据，已生成错误日志 请导出错误日志修正数据后再次导入 ); const exportErrorLog = () => { download_txt('log.txt', exceptionContent); setModalStep(0); setImportModal(false); }; const importProps = { name: 'file', action: '/api/demand/store/importStoreShelves', headers: { Accesstoken: accessToken }, showUploadList: false, maxCount: 1, className: styles.importBtn, onChange(info) { setLoading(true); if (info.file.status === 'done') { setModalStep(1); setExceptionContent(info.file.response.message); if (info.file.response.code === 1000) { setExceptionCheck(false); setStep1DescriptState(step1DescripSuccess); settdata(info.file.response.data); } else { setExceptionContent(info.file.response.message); setExceptionCheck(true); setStep1DescriptState(step1Exception); } setLoading(false); } else if (info.file.status === 'error') { setLoading(false); } }, }; useEffect(() => { currentRef.current = { get: () => new Promise((resolve) => { resolve({ state: true, name: 'equipment', data: tdata }); }), }; }, [tdata]); return ( setImportModal(true)}>Excel导入 fetchData(params)} /> {modalStep === 0 && ( } title={step0Description} extra={ 上传 } /> )} {modalStep === 1 && !exceptionCheck && ( } title={step1DescriptState} /> )} {modalStep === 1 && exceptionCheck && ( } title={step1Exception} extra={导出错误日志} /> )} ); }; export default Equipment;