redux存储变量未在方法内部刷新

Question

我目前正在尝试使用antd设计实现一个上传组件。

我有一个变量，我将状态映射到称为进度的道具。此变量用于设置上传组件的上传进度。

当控制台在主功能M3UUpload中进行日志记录时，变量完全显示为预期的

然而，我还在另一个名为checkProgress的函数中使用进度。在所有情况下，进度都显示为未定义。

请在下面找到一个代码示例：

import { Row, Col, Upload, Button, message } from 'antd';
import Layout from '../Layout';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { _upload_m3u } from '../../../shared/actionCreators/m3u';

const mapDispatchToProps = dispatch => ({
actions: bindActionCreators(
{ upload: _upload_m3u },
dispatch,
),
});
const mapStateToProps = state => ({ m3u_upload: state.m3us.pending });
const M3UUpload = ({
m3u_upload: { progress, channels },
actions: { upload }
}) => {
const [displayUpload, setDisplayUpload] = React.useState(true);
const showUpload = () => setDisplayUpload(true);
const hideUpload = () => setDisplayUpload(false);
const checkProgress = (onSuccess, onProgress) => setTimeout (() => {
console.log(progress) ---> undefined x3
if (progress === 100){
onSuccess("ok");
} else {
onProgress({percent: progress});
checkProgress(onSuccess, onProgress);
}  
}, 1000);
const dummyRequest = ({ file, onSuccess, onProgress }) => checkProgress(onSuccess, onProgress);
const beforeUpload = (file, fileList) => {
upload({ size: file.size, path: file.path })
};
const onChange = info => {
switch (info.file.status) {
case "done":
//console.log({m3u_upload});
break;
case "uploading":
//info.file.percent = progress;
break;
default:
message.error(`${info.file.name} file upload failed.`);
break;
}
};
console.log(progress) --> 25, 50, 100
return (
<Layout>
<div>
<Row>
<Col span={12}>
<Upload
accept=".m3u"
customRequest={dummyRequest}
onChange={onChange}
beforeUpload={beforeUpload}
>
<Button>Choose File</Button>
</Upload>
</Col>
<Col span={12}>
Download from URL
</Col>
</Row>
</div>
</Layout>
);
};
export default connect(mapStateToProps, mapDispatchToProps)(M3UUpload); ```

Answer 1

由于信息不完整，不确定您实际面临的错误，但以下函数中似乎存在一些问题。

const checkProgress = (onSuccess, onProgress) => setTimeout (() => {
if (progress === 100){
onSuccess("ok");
} else {
onProgress({percent: progress});
checkProgress(onSuccess, onProgress, progress);
}  
}, 1000);

checkProgress函数接收两个参数onSuccess和onProgress。在其他情况下，您正在通过3，checkProgress(onSuccess, onProgress, progress);

您可以将代码示例发送到尝试渲染M3UUpload组件的位置吗？