如何更改作为道具传递给 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>

我为此功能制作了一个简单的沙箱。 我使用了一个额外的按钮来传递撤消功能。 检查代码，看看如何使用。