Question

我无法正确设置React-Bootstrap进度栏时遇到问题。它应该根据组件的状态变量更新其“现在”值。我正在调用一个图像处理函数，该函数在处理图像时会通过25,50,75,100来更新组件状态（通过console.log验证是否可以正常工作）。但是，进度条仅从0跳到100。如何使进度条从状态更新其“现在”值？

下面的代码，谢谢您对解决此问题的想法：）

class RegistrationForm extends React.Component {
    constructor(props) {
      super(props);
      this.state = { uploadProgress: null };
    }

    setUploadProgress = (progress) => {
      this.setState({uploadProgress: progress});
    }

    render() {
    return (
    <ProgressBar now={this.state.uploadProgress} label={this.state.uploadProgress} />
    )
    }
}

export default RegistrationForm;

imageProcessing.js：此文件链接到RegistrationForm，并在注册表单上调用setUploadProgress函数。当我在console.logging的RegistrationForm组件上记录状态时，状态会立即更新，但是进度条会从0跳到100。我不确定这是错误地绑定上下文还是错误地引用了问题。注册表的setUploadProgress方法。在我的计算机上，整个图像处理大约需要3-4秒，因此进度条应根据状态变化有足够的时间来更改。

imageProcessing.js

var Jimp = require('jimp');

function Progress(context) {
    this.currentProgress = 0;
    this.setUploadProgress = context.setUploadProgress;
  }

export default async function ProcessImage (image, context) {
let progressBar = new Progress(context);
let image = await Jimp.read(imageUrl);
progressBar.setUploadProgress(10);
}

React-Bootstrap进度栏不会随着状态更改而更新

0 个答案: