'number | { percent: number; }' 型不可分配给 'string | number | undefined' 类 ts(2322)

Question

目前，我正在React,Typescript项目中使用reactsemantic-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 = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 5);
};
const decrement = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 5);
};

return (
<>
<div>  
<Progress percent={activeStep} indicating color={'red'} size={'small'}/> //error in here percent
<Button onClick={increment}>Increment</Button>
<Button onClick={decrement}>Decrement</Button>
</div>
</>
);        
}

Answer 1

尝试从

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

const [activeStep, setActiveStep]

Answer 2

如果您试图设置初始状态，然后在useState钩子中这样做，使用重构赋值回调值是无用的，因为useState钩子将始终返回您设置的定义状态。

将percent子状态移动到钩子中并相应地更新:

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

const increment = () => {
setActiveStep((prevActiveStep) => ({
percent: prevActiveStep.percent + 5
}));
};
const decrement = () => {
setActiveStep((prevActiveStep) => ({
percent: prevActiveStep.percent - 5
}));
};
...
<Progress
percent={activeStep.percent}
indicating
color={'red'}
size={'small'}
/>

或者不要使用嵌套的percent状态:

//let percent :number
const [activeStep, setActiveStep] = React.useState(0);

const increment = () => {
setActiveStep((prevActiveStep) => prevActiveStep + 5);
};
const decrement = () => {
setActiveStep((prevActiveStep) => prevActiveStep - 5);
};
<Progress
percent={activeStep}
indicating
color={'red'}
size={'small'}
/>

Answer 3

问题

状态定义不正确，导致错误。

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

你不需要一个对象为你的状态，因为你正试图减少和增加处理函数中的activeStep。

所以如果你想定义一个对象作为一个状态，你可以很容易地传递一个{}作为useState的参数，但在你的情况下，你只需要一个数字来增加和减少。

的解决方案更改状态定义以正确创建状态变量:

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

作为建议

你不需要用片段<></>来包装你的组件，因为你的返回语句都包装在div元素中。