Блог

Главная - Вопросы по программированию - Обновление значения прогресса Materui LinearProgressWithLabel моим собственным значением

Обновление значения прогресса Materui LinearProgressWithLabel моим собственным значением

#javascript #reactjs #material-ui

#javascript #reactjs #материал-пользовательский интерфейс

Вопрос:

Я пытаюсь обновить значение прогресса Material UI LinearProgressWithLabel своим собственным значением. Я получаю свое значение из процесса загрузки в методе Axios.post, и это процентное значение, ниже которого находится число.

 <Grid item xs>
   <LinearWithValueLabel value={percent}/>
</Grid>

А затем индикатор выполнения:

 import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import LinearProgress, { LinearProgressProps } from '@material-ui/core/LinearProgress';
import Typography from '@material-ui/core/Typography';
import Box from '@material-ui/core/Box';

interface Props {
  value: number;
}

const LinearProgressWithLabel: React.FC<Props> = ({ value }) => {
  return (
    <Box display="flex" alignItems="center">
      <Box width="100%" mr={1}>
        <LinearProgress variant="determinate" />
      </Box>
      <Box minWidth={35}>
        <Typography variant="body2" color="textSecondary">{`${Math.round(
          value,
        )}%`}</Typography>
      </Box>
    </Box>
  );
}

const useStyles = makeStyles({
  root: {
    width: '100%',
  },
});

const LinearWithValueLabel: React.FC = () => {
  const classes = useStyles();
  const [progress, setProgress] = React.useState(0);

  React.useEffect(() => {
    const timer = setInterval(() => {
      setProgress((prevProgress) => (prevProgress >= 100 ? 0 : progress));
    }, 800);
    return () => {
      clearInterval(timer);
    };
  }, []);

  return (
    <div className={classes.root}>
      <LinearProgressWithLabel value={progress} />
    </div>
  );
}

export default LinearWithValueLabel;

Но я получаю эту ошибку в консоли:

 Warning: Material-UI: you need to provide a value prop when using the determinate or buffer variant of LinearProgress

Что я делаю не так?

Ответ №1:

Вам не хватает значения prop.

 const LinearProgressWithLabel: React.FC<Props> = ({ value }) => {
return (
  <Box display="flex" alignItems="center">
    <Box width="100%" mr={1}>
      <LinearProgress variant="determinate" value={value} />
    </Box>
    <Box minWidth={35}>
      <Typography variant="body2" color="textSecondary">{`${Math.round(
        value,
      )}%`}</Typography>
    </Box>
  </Box>
 );
}

Комментарии:

1. Нет, я не: <Значение LinearProgress={процент} />

2. @это ваш LinearWithValueLabel tho… Проверьте свой LinearProgressWithLabel

3. Проверьте обновленный ответ. Вы не включали значение prop в LinearProgress из material-ui.

4. Я добавил это, но «значение все еще не обновляется». Это <LinearWithValueLabel value={percent}/> имеет красную строку под значением: ‘Type ‘{ value: number; }’ не присваивается типу ‘IntrinsicAttributes amp; { дочерние элементы?: ReactNode; }’. Свойство ‘value’ не существует для типа ‘IntrinsicAttributes amp; { дочерние элементы?: ReactNode; }»

5. Ваш компонент LinearWithValueLabel не имеет никакого аргумента (prop) в своем объявлении, поэтому он не распознает никакого значения prop. Объявите его так, как вы сделали для LinearProgressWithLabel