Я пытаюсь показать счетчик с процентным значением, когда в моем приложении реакции есть загрузка файла. Для этого я использую материал UI круговой прогресс . Поэтому я сделаю вызов отдыха, используя Ax ios, и настрою его так, чтобы он давал мне процентные значения и сохранял их в локальном хранилище. Код для моего вызова rest выглядит так:
callRestService(URL,postBody){
const config = {
onUploadProgress: function(progressEvent) {
var percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total)
console.log(percentCompleted);
localStorage.setValue('percentage',''+percentCompleted);
}
}
axios.post(URL, postBody, config)
.then(res => console.log(res))
.catch(err => console.log(err))
}
А фрагмент кода для компонента счетчика:
export default function CircularProgressWithLabel(props) {
const initialPercentage = () => Number(localStorage.getItem('percentage') || 0);
const [percent,setPercent] = React.useState(initialPercentage);
React.useEffect(() => {
setPercent(Number(localStorage.getItem('percentage')));
},[localStorage.getItem('percentage')])
return (
<Box position="relative" display="inline-flex">
<CircularProgress variant="static" {...props} />
<Box
top={0}
left={0}
bottom={0}
right={0}
position="absolute"
display="flex"
alignItems="center"
justifyContent="center"
>
<Typography variant="caption" component="div" color="textSecondary">
{percent}
</Typography>
</Box>
</Box>
);
}
Я использую эти два вспомогательных метода в родительском компоненте в этом способ:
function mainComponent(){
...
const [loading,setLoading] = React.useState(false);
...
// this function will be called when a button is clicked.
async function importFile(){
setLoading(true);
await callRestService('endpontURl',data);
setLoading(false);
}
...
return{
...
{ loading && <CircularSpinner/> }
}
}
Теперь проблема в том, что компонент прядильщика отображается только один раз, то есть всякий раз, когда я устанавливаю хук loading в значение true, и поскольку начальное значение для процента в круговом прядильщике ноль, он не покажет компонент прядильщика. Но позже я обновляю значение localStorage в callRestService и использую useEffect, который прослушивает значение localStorage в компоненте счетчика, я ожидал, что компонент счетчика будет отображаться каждый раз, когда значение обновляется в callRestService, но этого не происходит. Итак, может ли кто-нибудь помочь мне с этим, я хотел бы отображать компонент прядильщика каждый раз, когда происходит обновление значения в локальном хранилище, тем самым предоставляя способ получить последнее загруженное процентное значение. Или есть альтернатива для предоставления значения, возвращаемого Ax ios в компоненте callRestService, компоненту прядильщика.