Переменная в хранилище не обновляется внутри метода - PullRequest
Новая
       26

Переменная в хранилище не обновляется внутри метода

0 голосов
/ 14 марта 2020

В настоящее время я пытаюсь реализовать компонент загрузки с использованием дизайна 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); ```

1 Ответ

0 голосов
/ 14 марта 2020

Не уверен, с какой ошибкой вы действительно сталкиваетесь из-за неполной информации, но похоже, что есть проблема в следующей функции. 

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

checkProgress функция получает два параметра, onSuccess и onProgress. в состоянии else вы передаете 3, checkProgress(onSuccess, onProgress, progress);

Можете ли вы отправить пример кода, где вы пытаетесь отобразить компонент M3UUpload?

...