Блог

В настоящее время я работаю над React Typescript проектом, реализующим индикатор выполнения с использованием react semantic-ui . Поэтому я пришел к ошибке машинописи. Вот мой код

 import React, { Component,useState } from 'react' import { Button, Progress } from 'semantic-ui-react'  export default function ProgressMobileStepper() {  //let percent :number  const [activeStep={percent:0}, setActiveStep] = React.useState(0);    const increment = () =gt; {  setActiveStep((prevActiveStep) =gt; prevActiveStep   5);  };   const decrement = () =gt; {  setActiveStep((prevActiveStep) =gt; prevActiveStep - 5);  };     return (  lt;gt;  lt;divgt;   lt;Progress percent={activeStep} indicating color={'red'} size={'small'}/gt; //error in here percent  lt;Button onClick={increment}gt;Incrementlt;/Buttongt;  lt;Button onClick={decrement}gt;Decrementlt;/Buttongt;  lt;/divgt;  lt;/gt;  );  }  

Попробуйте изменить его с

 const [activeStep={percent:0}, setActiveStep]  

Для

 const [activeStep, setActiveStep]  

Если вы пытаетесь установить начальное состояние, а затем делаете это в useState крючке, использование резервных значений назначения деструкции бесполезно, так как useState крючок всегда будет возвращать заданное вами состояние.

Либо переместите percent подстанцию в крючок и обновите ее соответствующим образом:

 //let percent :number const [activeStep, setActiveStep] = React.useState({ percent: 0 });    const increment = () =gt; {  setActiveStep((prevActiveStep) =gt; ({  percent: prevActiveStep.percent   5  })); };  const decrement = () =gt; {  setActiveStep((prevActiveStep) =gt; ({  percent: prevActiveStep.percent - 5  })); };  ...  lt;Progress  percent={activeStep.percent}  indicating  color={'red'}  size={'small'} /gt;  

Или не используйте вложенное percent состояние:

 //let percent :number const [activeStep, setActiveStep] = React.useState(0);    const increment = () =gt; {  setActiveStep((prevActiveStep) =gt; prevActiveStep   5); };  const decrement = () =gt; {  setActiveStep((prevActiveStep) =gt; prevActiveStep - 5); };  lt;Progress  percent={activeStep}  indicating  color={'red'}  size={'small'} /gt;  

Проблема

Ваше определение состояния неверно и вызывает ошибку.

 const [activeStep={percent:0}, setActiveStep] = React.useState(0);  

Вам не нужен объект для вашего состояния, так как вы пытаетесь уменьшить и увеличить функции activeStep обработчика.

поэтому, если вы хотите определить объект как состояние , вы можете легко передать a {} в качестве параметра useState , но в вашем случае вам просто нужно число для увеличения и уменьшения.

Решение

Измените определение состояния, чтобы правильно создать переменную состояния:

 const [activeSte, setActiveStep] = React.useState(0)  

В качестве предложения

Вам не нужно обертывать свой компонент фрагментом, lt;gt;lt;/gt; так как весь ваш оператор return заключен в div элемент.