我如何通過 React 中由 3 個 useMemo 函數組成的 Props 來實現 map？

Question

我有 3 個使用 useMemo 的獨立函數，它們在儀表板中為用戶返回不同類型的警報。

如果這些警報是真實的，它們將出現在用戶儀表板的頂部，但如果應該出現的警報不止 1 個，它們將被放置在自動滑動的幻燈片中。

我創建了一個幻燈片組件並通過道具傳遞所有 3 個函數。 我的問題是如何通過幻燈片組件中的道具 map 來呈現這些警報？

我嘗試使用“props.map”這樣做，但收到有關 PropTypes 中缺少 map 的錯誤，因此我不確定我是否通過嘗試使用 a.map 呈現警報來正確執行此操作？

這是我的主文件，其中包含 3 個 useMemo 警報：

export const TransactionsPage = (props) => {
    const { t } = props;
    const { data: profile } = apiService.useGetSingleAccountQuery();
    const { data: accountInfo } = apiService.useGetPlanQuery();

 const renderMaxManualTransactionWarning = useMemo(() => {
        if (accountInfo?.exceed_tx_capability)
        return (
            <>
                <div className={"free-trial-info"}>
                    <div className={"row"}>
                        <CryptoIcon name={"alert"} />
                        <Text size={14}>{t("pages.transactions.warning.transactions_limit")}</Text>
                    </div>
                    <Button
                        size={"small"}
                        type={"primary"}
                        onClick={() => historyObject.push("/account/subscription/change_plan")}
                    >
                        {t("pages.transactions.warning.action")}
                        <CryptoIcon name={"arrow-right"} />
                    </Button>
                </div>
            </>
        );
        }, [t, accountInfo]);
    // }, [t]);

    const renderMissingTransferTransactionWarning = useMemo(() => {
        if (unlinkedTransferTx?.items?.length > 0)
            return (
                <>
                    <div className={"import-warning"}>
                        <div className={"row"}>
                            <CryptoIcon name={"alert"} />
                            <Text size={14}>
                                {t("pages.transactions.warning.transfer_transactions_missing").replace(
                                    "[num]",
                                    unlinkedTransferTx.items.length
                                )}
                            </Text>
                        </div>
                        <Button
                            size={"small"}
                            type={"primary"}
                            onClick={() => historyObject.push("/transactions/transfer/list")}
                        >
                            {t("pages.transactions.warning.transfer_transactions_missing_action")}
                            <CryptoIcon name={"arrow-right"} />
                        </Button>
                    </div>
                </>
            );
    }, [t, unlinkedTransferTx]);

    const renderSuggestedLinksWarning = useMemo(() => {
        if (suggestedLinks?.items?.length > 0)
            return (
                <div className={"suggested-links-info"}>
                    <div className={"row"}>
                        <CryptoIcon name={"alert"} />
                        <Text size={14}>
                            {t("pages.transactions.warning.suggested_links").replace(
                                "[num]",
                                suggestedLinks.items.length
                            )}
                        </Text>
                    </div>
                    <Button
                        size={"small"}
                        type={"primary"}
                        onClick={() => historyObject.push("/transactions/links/suggestions")}
                    >
                        {t("pages.transactions.warning.links_action")}
                        <CryptoIcon name={"arrow-right"} />
                    </Button>
                </div>
            );
    }, [t, suggestedLinks]);

return (
        <LoggedInLayout className={"transactions-page"}>
            <Slideshow
                renderMaxManualTransactionWarning={renderMaxManualTransactionWarning}
                renderMissingTransferTransactionWarning={renderMissingTransferTransactionWarning}
                renderSuggestedLinksWarning={renderSuggestedLinksWarning}
            />
           
        </LoggedInLayout>
    );
};

TransactionsPage.propTypes = {
    t: func,
};

export default withTranslation()(TransactionsPage);

還有我的 SlideShow 組件：

/* eslint-disable no-unused-vars */
import React, { useEffect, useState, useRef, useMemo } from "react";
import "./index.scss";
import PropTypes from "prop-types";

const colors = ["#0088FE", "#00C49F", "#FFBB28"];
const delay = 10000;

export const Slideshow = (props) => {
    const [index, setIndex] = useState(0);
    const timeoutRef = useRef(null);

    function resetTimeout() {
        if (timeoutRef.current) {
            clearTimeout(timeoutRef.current);
        }
    }

    useEffect(() => {
        resetTimeout();
        timeoutRef.current = setTimeout(
            () => setIndex((prevIndex) => (prevIndex === colors.length - 1 ? 0 : prevIndex + 1)),
            delay
        );

        return () => {
            resetTimeout();
        };
    }, [index]);

    return (
        <div className="slideshow">
            <div className="slideshowSlider" style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}>
                {/* Map through the functions and render them here */}
               
            </div>

            <div className="slideshowDots">
                {colors.map((_, idx) => (
                    <div
                        key={idx}
                        className={`slideshowDot${index === idx ? " active" : ""}`}
                        onClick={() => {
                            setIndex(idx);
                        }}
                    ></div>
                ))}
            </div>
        </div>
    );
};

Slideshow.propTypes = {
    
};

export default Slideshow;

簡而言之，我只想 map 通過來自道具的功能並將它們呈現在幻燈片中。

對此有任何建議，我們將不勝感激。 提前謝謝了！

Answer 1

您可以像children一樣做，而不是將警報作為props傳遞

1:

export const TransactionsPage = (props) => {
    const { t } = props;
    const { data: profile } = apiService.useGetSingleAccountQuery();
    const { data: accountInfo } = apiService.useGetPlanQuery();

 const renderMaxManualTransactionWarning = useMemo(() => 
       accountInfo?.exceed_tx_capability ? 
            <>
                <div className={"free-trial-info"}>
                    <div className={"row"}>
                        <CryptoIcon name={"alert"} />
                        <Text size={14}>{t("pages.transactions.warning.transactions_limit")}</Text>
                    </div>
                    <Button
                        size={"small"}
                        type={"primary"}
                        onClick={() => historyObject.push("/account/subscription/change_plan")}
                    >
                        {t("pages.transactions.warning.action")}
                        <CryptoIcon name={"arrow-right"} />
                    </Button>
                </div>
            </>
        : null
        , [t, accountInfo]);
    // }, [t]);

    const renderMissingTransferTransactionWarning = useMemo(() => 
      unlinkedTransferTx?.items?.length > 0 ?
          
                <>
                    <div className={"import-warning"}>
                        <div className={"row"}>
                            <CryptoIcon name={"alert"} />
                            <Text size={14}>
                                {t("pages.transactions.warning.transfer_transactions_missing").replace(
                                    "[num]",
                                    unlinkedTransferTx.items.length
                                )}
                            </Text>
                        </div>
                        <Button
                            size={"small"}
                            type={"primary"}
                            onClick={() => historyObject.push("/transactions/transfer/list")}
                        >
                            {t("pages.transactions.warning.transfer_transactions_missing_action")}
                            <CryptoIcon name={"arrow-right"} />
                        </Button>
                    </div>
                </>
            : null
    , [t, unlinkedTransferTx]);

    const renderSuggestedLinksWarning = useMemo(() => 
        suggestedLinks?.items?.length > 0 ? 
            
                <div className={"suggested-links-info"}>
                    <div className={"row"}>
                        <CryptoIcon name={"alert"} />
                        <Text size={14}>
                            {t("pages.transactions.warning.suggested_links").replace(
                                "[num]",
                                suggestedLinks.items.length
                            )}
                        </Text>
                    </div>
                    <Button
                        size={"small"}
                        type={"primary"}
                        onClick={() => historyObject.push("/transactions/links/suggestions")}
                    >
                        {t("pages.transactions.warning.links_action")}
                        <CryptoIcon name={"arrow-right"} />
                    </Button>
                </div>
           :null
    , [t, suggestedLinks]);

return (
        <LoggedInLayout className={"transactions-page"}>
            <Slideshow>
              {renderMaxManualTransactionWarning}
              {renderMissingTransferTransactionWarning}
              {renderSuggestedLinksWarning}
            </Slideshow>
           
        </LoggedInLayout>
    );
};

TransactionsPage.propTypes = {
    t: func,
};

export default withTranslation()(TransactionsPage);

2：

import React, { useEffect, useState, useRef, useMemo } from "react";
import "./index.scss";
import PropTypes from "prop-types";

const colors = ["#0088FE", "#00C49F", "#FFBB28"];
const delay = 10000;

export const Slideshow = ({children}) => {
    const [index, setIndex] = useState(0);
    const timeoutRef = useRef(null);

    function resetTimeout() {
        if (timeoutRef.current) {
            clearTimeout(timeoutRef.current);
        }
    }

    useEffect(() => {
        resetTimeout();
        timeoutRef.current = setTimeout(
            () => setIndex((prevIndex) => (prevIndex === colors.length - 1 ? 0 : prevIndex + 1)),
            delay
        );

        return () => {
            resetTimeout();
        };
    }, [index]);

    return (
        <div className="slideshow">
            <div className="slideshowSlider" style={{ transform: `translate3d(${-index * 100}%, 0, 0)` }}>
               {children}
               
            </div>

            <div className="slideshowDots">
                {colors.map((_, idx) => (
                    <div
                        key={idx}
                        className={`slideshowDot${index === idx ? " active" : ""}`}
                        onClick={() => {
                            setIndex(idx);
                        }}
                    ></div>
                ))}
            </div>
        </div>
    );
};

Slideshow.propTypes = {
    
};

export default Slideshow;