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

Question

目前，我正在 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 = () => {
    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

问题

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

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

您不需要状态对象，因为您正在尝试减少和增加处理函数中的 activeStep。

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

解决方案

更改状态定义以正确创建状态变量：

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

作为建议

您不需要用片段 <></> 包装您的组件，因为您的 return 语句全部包装在 div 元素中。

Answer 3

如果您尝试设置初始状态，则在 useState 挂钩中进行设置，使用解构赋值回退值是无用的，因为 useState 挂钩将 always return 你设置的定义状态。

将 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'}
/>

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

Type 'number | { percent: number; }' is not assignable to type 'string | number | undefined' ts(2322)

typescript

reactjs

react-hooks

use-state

问题

解决方案

作为建议