如何更改作為道具傳遞給 React 組件的 function？

Question

我正在嘗試構建一個具有可選UNDO 操作的可重用 SnackBar（顯示剛剛發生的信息的小彈出窗口）組件。 我想像這樣使用它：

主要成分

import SnackBar from "./SnackBar";
import { useState } from "react";

const MainComponent({item}) => {
        const [snackBarVisible, setSnackBarVisible] = useState(false);
        const [snackBarMessage, setSnackBarMessage] = useState("");
        const [undoFunction , setUndoFunction ] = useState(null);
        //var undoFunction = null;

        const undoAddToFav = () => {
                //code that removes from favorites the stuff that was just added 
                console.log("removed last added product from favs");
        };

        const undoAddToCart = () => {
                //code that removes from cart the last added product
                console.log("removed last added product from cart");
        }

        const addToCart = (item) => {
                //some code
                setSnackBarMessage("Item added to cart");
                //HELP NEEDED HERE
                //undoFunction = undoAddToCart; // this doesn't work at all (no error messages)
                setUndoFunction(() => undoAddToCart()) // this executes undoAddToCart when addToCart is called and not on button press
                setSnackBarVisible(true);
        }
        const addToFavorites = (item) => {
                //some code
                setSnackBarMessage("Item added to favourites");
                //undoFunction = undoAddToFav ; // <== HELP NEEDED HERE
                //setUndoFunction(() => undoAddToCart()) 
                setSnackBarVisible(true);
        }
        const displaySnackBar = () => {
                setSnackBarMessage("Some info");
                setSnackBarVisible(true);
                //this one has no "undo" button
        }
        //some other stuff
        return (
                //some other stuff that calls the actions above
                <SnackBar snackBarMessage = {snackBarMessage} snackBarVisible = {snackBarVisible) undoFunction = {undoFunction}/>
        );
};

子組件

我希望此撤消操作是可選的。

export default const SnackBar = ({snackBarMessage, snackBarVisible, undoFunction}) => {
        //some stuff
        return (
                <>                
                        //some stuff - handle visibility, etc
                        //help needed here as well - how do I display the button only when the function prop is passed?
                        {undoFunction && <button onClick={undoFunction}>UNDO</button>}; //this doesn't work properly
                        <div>{snackBarMessage}</div>;
                </>
        );
};

我已經嘗試過 useState、useCallback、useMemo、useRef 來處理這個問題，但似乎沒有任何效果。 這是我第一次在這里求救:)

Answer 1

您必須使用useState聲明undoFunction ，默認情況下為 null：

const [undoFunction, setUndoFunction] = useState(null)

然后使用setUndoFunction(/* your new function here or null */) 。

它不起作用，因為如果您不使用 state，React 將不會重新呈現更改。

Answer 2

您問題的問題從MainComponent開始

const [undoFunction , setUndoFunction ] = useState(null);

由於undoFunction的值為 null，因此該按鈕根本不會在子組件中呈現。 我的意思是這段代碼。

{undoFunction && <button onClick={undoFunction}>UNDO</button>}; //this doesn't work properly

你可以把它改成這樣。 呈現按鈕並執行undoFunction如果可用）。

<button
  onClick={() => {
    if (undoFunction) undoFunction();
  }}
>
UNDO
</button>

我為此功能制作了一個簡單的沙箱。 我使用了一個額外的按鈕來傳遞撤消功能。 檢查代碼，看看如何使用。