如何控制使用状态的返回类型

Question

我只想将状态更改为工作或离开。我尝试使用 useState，但它返回 void 类型。如何返回布尔类型？我是打字稿的初学者，请帮助我

import React, {useState,  useCallback} from 'react';
import MainHeader from 'components/UI/Main/MainHeader';
interface MainHeaderState {
   working: boolean,
}
const MainHeaderContainer:React.FC<MainHeaderState> = () =>{
    const [working, setWorking] = useState(false);
    const onWorking = useCallback(() => {
        return setWorking(true);
    }, [])
    const onLeaving = useCallback(() =>  {
        return setWorking(false)
    } ,[])
    return (
      <MainHeader
        working = {onWorking}
        leaving = {onLeaving}
      />
    );
}
export default MainHeaderContainer

Answer 1

不要使用 return 关键字。

试试这个：-

import React, {useState,  useCallback} from 'react';
import MainHeader from 'components/UI/Main/MainHeader';
const MainHeaderContainer:React.FC = props =>{
    const [working, setWorking] = useState(false);
    const onWorking = useCallback(() => {
        setWorking(true);
    }, [])
    const onLeaving = useCallback(() =>  {
        setWorking(false)
    } ,[])
    return (
      <MainHeader
        working = {onWorking}
        leaving = {onLeaving}
      />
    );
}
export default MainHeaderContainer

MainHeader 组件：-

import React from 'react';
import classes from './MainHeader.module.scss';
import { NavLink } from 'react-router-dom';
import Button from 'components/UI/Button'
interface MainHeaderProps {
  working:() => void;
  leaving:() => void;
}
const MainHeader: React.FC<MainHeaderProps> = props => {
  return (
    <div className = {classes.HeaderWrapper}>
      <div className = {classes.Search}>
        <input type = "text" placeholder = "Search...."/>
      </div>
      <div className = {classes.Navbar}>
        <nav>
        <span><NavLink exact to = '/notice'>notice</NavLink></span>
        </nav>
        <Button btnType = 'working' clicked = {props.working} btnValue = "working"/>
        <Button btnType = 'leaving' clicked = {props.leaving} btnValue = "leaving"/>
      </div>
    </div>
  )
}
export default MainHeader;

问题是您的 prop 类型与您传递它的值不匹配MainHeader。您正在向它传递一个函数，并且它期待一个布尔值(检查您的MainHeader组件(。所以我只是将道具类型更改为功能，它现在应该可以工作了。

Answer 2

• 这是 MainHeader 组件

import React from 'react';
import classes from './MainHeader.module.scss';
import { NavLink } from 'react-router-dom';
import Button from 'components/UI/Button'
interface MainHeaderProps {
  working: boolean,
  leaving: boolean
}
const MainHeader: React.FC<MainHeaderProps> = (working,leaving) => {
  return (
    <div className = {classes.HeaderWrapper}>
      <div className = {classes.Search}>
        <input type = "text" placeholder = "Search...."/>
      </div>
      <div className = {classes.Navbar}>
        <nav>
        <span><NavLink exact to = '/notice'>notice</NavLink></span>
        </nav>
        <Button btnType = 'working' clicked = {working} btnValue = "working"/>
        <Button btnType = 'leaving' clicked = {leaving} btnValue = "leaving"/>
      </div>
    </div>
  )
}
export default MainHeader;