如何获取按钮点击触发函数返回的新数组并使用？

你的问题核心是没有用状态存储处理后的数组，且useCallback包裹的函数没有正确保存makeAdminPresenter的返回结果。React中要让UI响应数组变化，必须将数组存入状态。

修正后的完整代码 #

import { useState, useCallback } from 'react';

// 组件内部逻辑
const [processedTiles, setProcessedTiles] = useState(tiles); // 用原始数组初始化状态

const makeAdminPresenter = (collection) => {
  return collection?.map(obj => {
    if(obj.userType === "administrator") {
      return {...obj, isAdminPresenting: true};
    }
    return obj;
  });
};

const handleButtonClick = useCallback(() => {
  const newTiles = makeAdminPresenter(tiles);
  setProcessedTiles(newTiles); // 将处理后的新数组存入状态
}, [makeAdminPresenter, tiles]);

// 组件渲染部分示例
return (
  <div>
    <button onClick={handleButtonClick}>设置管理员展示状态</button>
    {processedTiles?.map(tile => (
      <div key={tile.id}>
        {tile.userType}
        {tile.isAdminPresenting && <span> - 正在展示</span>}
      </div>
    ))}
  </div>
);

关键改动说明 #

• 新增useState定义processedTiles状态，专门存储处理后的数组。状态更新时组件会自动重新渲染，确保你能拿到最新的数组数据。
• 将原newTiles重命名为handleButtonClick（语义更清晰，明确是按钮点击的处理函数），在函数内部调用makeAdminPresenter拿到新数组后，用setProcessedTiles更新状态。
• 简化了makeAdminPresenter的返回逻辑，去掉冗余的变量声明。

如何使用新数组 #

之后在组件的任何位置（渲染JSX、其他业务函数）直接调用processedTiles即可，它始终是最新的处理后数组。

比如在其他函数中使用：

const countAdminPresenters = () => {
  return processedTiles?.filter(tile => tile.isAdminPresenting).length || 0;
};

内容的提问来源于stack exchange，提问作者Curious_guy