如何在單擊按鈕時獲取函數計算的值

Question

我點擊一個按鈕，它應該做的是觸發一個函數並在對象內部添加一個新屬性，該對象位於多個對象的大數組中，並最終返回一個新數組，我只想知道我們如何使用它該函數返回的新數組？

我正在使用這個函數來觸發更改我傳遞給它的數組，但我不確定如何取回這個值。 提前抱歉愚蠢的問題我是新來的。

const makeAdminPresenter = (collection) => {
        var newTiles = collection?.map( obj => {
            if(obj.userType === "administrator") {
                return {...obj, isAdminPresenting: true}
            }
            return obj;
        });
        console.log('pressed', newTiles)
        return newTiles

    };
    
    var newTiles = useCallback(() => {
         makeAdminPresenter(tiles);
    },[makeAdminPresenter, tiles]) 

    console.log('result',makeAdminPresenter,newTiles  )

我想使用 newTiles，有什么建議嗎？

Answer 1

在您的代碼中，您應該使用狀態（在具有功能組件時使用useState ）來存儲圖塊的狀態。 makeAdminPresenter會修改圖塊，您必須在圖塊更新后重新呈現組件。 下面的代碼片段有一個關於如何做到這一點的例子：

export default function Page() {
    const [tiles, setTiles] = React.useState([...]); // The tiles, you probably initialise elsewhere

    const makeAdminPresenter = () => {
        var newTiles = tiles.map(obj => {
            if (obj.userType === "administrator") {
                return {...obj, isAdminPresenting: true}
            }
            return obj;
        });
        console.log('pressed', newTiles)

        setTiles(newTiles); // Update the state so that the component gets re-rendered
    };

    console.log('result', makeAdminPresenter, tiles) // After the button is pressed tiles will be the new tiles
    return (<>
            <button onClick={makeAdminPresenter}></button>
            {tiles.map((tile, i) => (<TileComponent key={i} tile={tile}/>))}
        </>
    )
}

希望這可以幫助！