不使用disabled作为变量，而是将其设置为State，这将触发重新渲染：

function BuyBtn({ technology, label, resourceType, price, requirements = []}: IBuyBtn) {
    const units = useSelector((state: any) => state.units);
    const tech = useSelector((state: any) => state.tech);
    const resources = useSelector((state: any) => state.resources);
    const dispatch = useDispatch();

    const [disabled, setDisabled] = React.useState(false);
    let unlocked = true;

    const canAfford = (): boolean => {
        console.log('Units:', units);
        console.log("Checking affordability");
        if (resourceType.length != price.length) {
            throw `BuyBtn Error: price length is ${price.length} but resource length is ${resourceType.length}.`;
        }

        let isAffordable = true
        resourceType.forEach((res, i) => {
            const resPrice = price[i];
            if (resources[res] < resPrice) {
                isAffordable = false;
            }
        });

        return isAffordable;
    };

    useEffect(async() => {
        const value = await canAfford();
        setDisabled(!value);
    }, [resources])

    const meetsRequirements = (): boolean => {
        if (requirements.length === 0) {
            return true;
        }

        let isMeetingRequirements = true;
        requirements.forEach((req) => {
            if (!tech[req]) {
                isMeetingRequirements = false;
            }
        });

        return isMeetingRequirements;
    };

    const buyThing = () => {
        if (canAfford() && meetsRequirements()) {
            resourceType.forEach((res, i) => {
                const resPrice = price[i];
                dispatch(SubtractResource(res, resPrice));
            });

            dispatch(UnlockTech(technology, true))
        }
    };

    if (meetsRequirements() && canAfford()) {
        return (
            <button onClick={buyThing} disabled={disabled}>{label}</button>
        );
    } else {
        return null;
    }

}

export default BuyBtn;