输入'号码 | {百分比：数字； }' 不可分配给类型 'string |号码 |未定义的 ts(2322)答案

【问题标题】：Type 'number | { percent: number; }' is not assignable to type 'string | number | undefined' ts(2322)输入'号码 | {百分比：数字； }' 不可分配给类型 'string |号码 |未定义的 ts(2322)
【发布时间】：2021-12-09 14:15:15
【问题描述】：

目前，我正在开发一个 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>
    </>
  );        
}

【问题讨论】：

activeStep={percent:0} 你为什么要这样发起？ const [activeStep, setActiveStep] = React.useState(0); 这工作正常

标签： reactjs typescript react-hooks use-state

【解决方案1】：

尝试改变它

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

到

const [activeStep, setActiveStep]

【讨论】：

【解决方案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'}
/>

【讨论】：

【解决方案3】：

问题

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

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

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

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

解决方案

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

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

作为建议

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

【讨论】：