UseState 挂钩类型的问题

Question

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

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>
    )
}

这是代码

Answer 1

问题出在您的Card组件上。 错误是说setActive prop 期望收到一个boolean值，但你提供给它的是一个 function。

它应该期待 function。您需要更改Card上的道具类型，使setActive为 function，其参数为 boolean。

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

如果您希望在Card组件内调用setActive时能够使用 prevState 回调，那么您可以使用setActiveModal的确切类型 function，它是这样的：

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