Как мне контролировать тип возвращаемого значения useState - PullRequest
Новая
       7

Как мне контролировать тип возвращаемого значения useState

0 голосов
/ 07 июня 2019

Я просто хочу изменить состояние на работу или уход. Я пытался использовать 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

Ответы [ 2 ]

1 голос
/ 07 июня 2019

Не используйте ключевое слово 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).Поэтому я просто изменил типы опор, чтобы они работали, и теперь это должно работать.

0 голосов
/ 07 июня 2019
  • Это компонент 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;
...