Reactjs 物料UI线进度条不工作

我有一个简单的文件上传实用程序，我正在使用它，结合这个工具，我想使用MaterialUI LinearProgress栏来显示进度

下面显示的是我创建的组件，它呈现文件上载实用程序和LinearProgress栏

我正在使用库，使用多部分formdata将数据实际上传到后端。superagent的请求允许回调或事件处理程序用于上载进度。在我的代码中，进程事件处理程序被成功调用，并由console.log语句证明。在每次进度调用中，我都会更新LinearProgress栏使用的this.state.completed属性

问题是进度条没有向前移动。我肯定错过了一些非常简单的东西

非常感谢您的帮助，并向您表示衷心的感谢

import React，{Component}来自'React'；
从“react Dropzone”导入Dropzone；
“超级代理”的进口请求；
从“物料界面/LinearProgress”导入LinearProgress；
从“材质ui/styles/MuiThemeProvider”导入MuiThemeProvider；
导出默认类多文件上载扩展组件{
建造师（道具）{
超级（道具）；
此.state={
完成日期：0，
};
}
onDrop（文件）{
log（'Received files:'，files）；
this.state.completed=0；
var data=new FormData（）；
var req=request.post（'/nltools/v1/files/upload'）；
files.forEach（（文件）=>{
data.append（'files[]，file，file.name）；
});
请求时间（'进度'，（p）=>{
console.log（'Last percentage'，this.state.completed）；
变量百分比=数学下限（p.percent）；
如果（百分比>=100）{
this.setState（{completed:100}）；
console.log（'Done 100%”）；
}否则{
this.setState（{completed:percent}）；
this.state.completed=百分比；
log（'完成百分比：'，百分比）；
}
});
请求发送（数据）；
请求结束（功能（错误、恢复）{
this.state.completed=0；
console.log（“已成功上载”）；
});
}
render（）{
var thistyle={
边框宽度：4，
边框颜色：“橙色”，
边框样式：“虚线”，
边界半径：4，
差额：30，
填充：30，
身高：300，
过渡：“所有0.5秒”
};
变量progressStyle={
差额：30，
通过时间:30,，
};
返回(
尝试在此处删除一些文件，或单击以选择要上载的文件。{this.state.completed}
);
}
}

首先，我认为您的问题可能是：

onDrop={this.onDrop}

应该是

onDrop={files => this.onDrop(files)}

或者

或者

…否则，onDrop（）中的所有“this”引用都将不正确，因此“this.state”和“this.setState”将失败

但是，你也不应该直接改变你的状态。始终使用setState（）。因此，请删除所有此类呼叫：

this.state.completed = ???;

请始终这样做：

this.setState({ completed: ??? });

此外，setState是异步的。因此，如果您需要在状态更新后才触发某些内容，则可以将回调函数作为第二个参数传递：

this.setState({ completed: 75 }, () => { console.log('state.completed is now 75'));
// ^^ Immediately after the above call state.completed is probably not 75 yet,
// because setState() is async

最后，请特别注意您的req.end（）调用。在这里，您只是在改变状态（同样，这很糟糕），根本没有调用.setState（）（因此，在req.end（）之后不会重新呈现组件）

完整示例：

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“react Dropzone”导入Dropzone；
“超级代理”的导入请求；
从“rc进度”导入{Line}；
类应用程序扩展组件{
状态={
已完成：0
}
onDrop=文件=>{
this.setState（{已完成：0}）；
var data=new FormData（）；
files.forEach（文件=>{
data.append（“files[]”，file，file.name）；
});
var req=请求。post（“http://localhost:3001");
请求时间（'进度'，事件=>{
变量百分比=数学下限（事件百分比）；
如果（百分比>=100）{
this.setState（{completed:100}）；
}否则{
this.setState（{completed:percent}）；
}
});
常数=this；
请求发送（数据）；
请求结束（（错误、恢复）=>{
console.log（“已成功上载”）；
});
};
render（）{
常量divStyle={
边框：“1px纯黑”
};
返回(
尝试在此处删除一些文件，或单击以选择要上载的文件。{this.state.completed}
);
}
}
render（，document.getElementById（“根”））；

这很有效。一直以来，我都试图将这与进步联系在一起，而不是与onDrop本身联系在一起。在我发布了这个关于如何不改变这样的状态的问题后，我学到了。state.completed=xyz

this.setState({ completed: ??? });

this.setState({ completed: 75 }, () => { console.log('state.completed is now 75'));
// ^^ Immediately after the above call state.completed is probably not 75 yet,
// because setState() is async