时间戳

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

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

问题描述

目前，我正在开发一个使用 react 实现进度条React的项目。所以我想出了一个打字稿错误。这是我的代码Typescriptsemantic-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>
    </>
  );        
}

标签： reactjstypescriptreact-hooksuse-state

解决方案

如果您尝试设置初始状态，那么请在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'}
/>

推荐阅读