UseState 钩子类型的问题答案

【问题标题】：Problems with the UseState hook typingUseState 钩子类型的问题
【发布时间】：2021-09-25 15:45:47
【问题描述】：

我正在尝试通过道具将 useState 挂钩值放入组件。据我了解，打字稿抱怨我没有将 setActive 指定为布尔类型。我对吗？如果是这样，我该怎么做？

const Card = () => {

    const [activeModal, setActiveModal] = useState<boolean>(false)

    return (
        <>
        <ApproveModal active={activeModal} setActive={setActiveModal} />
        <div className="card">
            <div className="card-wrapper">
                <div className="card-header">
                    <div className="card-header-left">
                        <img src={token} alt="token" />
                        <div className="card-header-info-tag">
                            <h1>WETH-WBNB LP</h1>
                            <p>Auto-Compounding</p>
                        </div>
                    </div>
                    <div className="card-header-right">
                            <p>Pancake</p>
                            <img src={pancake} alt="pancake" />
                    </div>
                </div>

                <div className="card-info">
                    <div className="card-info-item">
                        <div className="card-info-item-title">Staked</div>
                        <div className="card-info-item-value">$482.22K</div>
                        <div className="card-info-item-description">39595 LPs</div>
                    </div>
                    <div className="card-info-item">
                        <div className="card-info-item-title">APY</div>
                        <div className="card-info-item-value">365%</div>
                        <div className="card-info-item-description">Daily: 2.00%</div>
                    </div>
                    <div className="card-info-item">
                        <div className="card-info-item-title">TVL</div>
                        <div className="card-info-item-value">$482.22K</div>
                        <div className="card-info-item-description">39595 LPs</div>
                    </div>
                </div>

                <div className="card-button" onClick={() => setActiveModal(!activeModal)}>Approve</div>
            </div>
        </div>
        </>
    )
}

"文本修复小文本问题" “文本修复小文本问题” "文字修复小文字问题"

和 ApproveModal

interface ApproveModalProps {
    active: boolean;
    setActive: boolean;
}

const ApproveModal = ({active, setActive}: ApproveModalProps) => {
    return (
        <div className="modal">
            <div className="modal-content">
                <div className="modal-header">
                    <img src={modalLogo} alt="modalLogo" />
                    <div className="modal-header-info">
                        <div className="modal-header-info-title">WETH-WBNB LP</div>
                        <div className="modal-header-info-description">Auto-Compounding</div>
                    </div>
                    <div className="modal-header-info-swap">@PancakeSwap</div>
                    <img src={closeIcon} alt="closeIcon" className="close-button" />
                </div>

                <div className="modal-actions">
                    <div className="modal-actions-buttons">
                        <div className="deposit">Deposit</div>
                        <div className="withdrow">Withdrow</div>
                    </div>
                </div>

                <div className="modal-balance">
                    <div className="modal-balance-header">
                        <div className="modal-balance-header-left">
                            <div className="balance">Balance</div>
                            <div className="link">Create LP</div>
                        </div>
                        <div className="modal-balance-header-right">
                            <img src={updateIcon} alt="updateIcon" />
                            <div className="value">0.0000</div>
                            <div className="value-description">($0.00)</div>
                        </div>
                    </div>
                    <div className="balance-input">
                        <input type="text" />
                        <div className="input-button">MAX</div>
                    </div>
                </div>

                <div className="modal-info">
                    <div className="modal-info-apy">
                        <div className="modal-info-apy-title">APY</div>
                        <div className="modal-info-item">
                            <div className="apy-value">365%</div>
                            <div className="apr-value">APR: Swap 70.9% + GROW 73.5%</div>
                        </div>
                    </div>

                    <div className="modal-info-contact">
                        <div className="modal-info-contact-title">Contact</div>
                        <div className="modal-info-item">
                            <div className="contact-link">View on BScScan</div>
                            <div className="contact-address">oxAD6bD158869a97219447cf63b090</div>
                        </div>
                    </div>

                    <div className="modal-button">Approve</div>
                    <h1>No deposit free. No withdraw free.</h1>
                </div>
            </div>
        </div>
    )
}

Here is the code

【问题讨论】：

欢迎来到 StackOverflow！首先，如果您将代码发布到问题中而不是图片中会更好。其次，查看您的代码，我相信在中 setActive 的类型是布尔值，而它应该是 React.Dispatch>
如果您发布的代码会有所帮助
可能你在<ActiveModel /> 的props 中缺少setActive 函数类型。请发布您的工作代码，以便人们可以提供帮助。

标签： reactjs typescript

【解决方案1】：

问题在于您的Card 组件。错误是说 setActive 道具期望收到 boolean 值，但您正在为它提供一个函数。

它应该期待一个函数。您需要更改 Card 上的 props 类型，使 setActive 是一个参数为布尔值的函数。

interface CardProps {
     setActive: (active: boolean) => void;
…

如果您希望在Card 组件内调用setActive 时能够使用prevState 回调，那么您可以使用setActiveModal 函数的确切类型，即：

interface CardProps {
    setActive: React.Dispatch<React.SetStateAction<boolean>>;
…

【讨论】：