如何控制 useState 的返回类型答案

【问题标题】：How do I controll return type of useState如何控制 useState 的返回类型
【发布时间】：2019-06-07 14:49:06
【问题描述】：

我只想将状态更改为工作或离开。我尝试使用 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

【问题讨论】：

你能解释更多吗？我们没有太多可以帮助您的。请详细说明问题。
const setWorking: (value: React.SetStateAction) => void // 我想在 const onWorking 中保存布尔类型的 true 但 setWorking 返回的是 void 类型.... 所以它正在发生类型错误以绑定。
请分享<MainHeader/>的代码。
好的，我已经发布了代码
你能检查更新的答案吗？让我知道它是否更清楚。此外，下次如果您想提供更多详细信息，只需编辑您的问题，而不是将其添加为答案。因为它会误导一些观众。

标签： reactjs typescript react-hooks

【解决方案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;

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

【讨论】：

耶稣.....哇非常感谢:)因为你我可以睡得很好

【解决方案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;

【讨论】：

我建议删除此答案并将其添加到问题本身。