如何在单击按钮时获取函数计算的值

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}/>))}
        </>
    )
}

希望这可以帮助！