React Material Table保存按钮异常：更新后偶现禁用、刷新表现不一致

• 偶现按钮禁用的根因：当前isSaveEnabled状态绑定在Material Table内置图标的onClick事件上，而Material Table内部会处理图标的原生点击逻辑，存在事件被拦截、冒泡失败的概率，导致绑定的状态更新逻辑偶尔不执行，按钮就一直处于禁用状态。
• 页面刷新表现异常的原因：初始状态配置错误，当前isSaveEnabled默认值为true，但页面刚加载没有任何修改操作，状态和业务逻辑不符；同时切换店铺、保存完成后没有重置相关状态，导致状态残留。
• 状态冗余问题：同时用isSaveEnabled和actionPerformed两个状态控制保存按钮，逻辑重复且容易出现状态不同步的问题。

1. 删除冗余状态，简化按钮控制逻辑
   直接废弃isSaveEnabled状态，保存按钮的禁用状态完全由actionPerformed控制即可，actionPerformed本身就代表是否有未保存的修改：

// 删掉 const [isSaveEnabled, setIsSaveEnabled] = useState(true); 这一行
// 按钮部分修改为：
{actionPerformed && <div style={{marginTop:'50px'}}>
  <Button variant="contained" color="primary" onClick={saveConfig} >Save Changes</Button>
</div>}

如果要保留编辑中途禁止点击的逻辑，也不要绑定图标点击，改为在增删改操作的Promise执行完成后再更新actionPerformed。

2. 修正状态更新时机
   不要在图标点击时更新状态，改为在增删改操作完成、数据更新成功后再设置actionPerformed：

// 示例：updateTableData 修改为
const updateTableData = (newData, oldData) => {
  newData.shopId = selectedShop.value
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const dataUpdate = [...data];
      const index = oldData.tableData.id;
      dataUpdate[index] = newData;
      setData([...dataUpdate]);
      setActionPerformed(true); // 操作成功后再设为true
      resolve();
    }, 300)
  })
}
// addRowToTable、deleteRow 同理，把setActionPerformed(true)挪到setData之后

如果用户点击取消编辑（Clear图标），没有产生数据修改，就不要修改actionPerformed。

3. 修正初始状态和场景重置逻辑

• 切换店铺时重置状态，避免之前的操作状态残留：

const handleChange = (shop) => {
  setActionPerformed(false); // 切换店铺重置未保存修改标记
  // 原有逻辑保持不变
  setSelectedShop(shop);
  if (shop === null) {
    setConfigLabel("Default Configuration");
    setSelectedShop({ value: "All", label: "All" });
  } else {
    setConfigLabel("Shop " + shop.value + " Configuration");
  }
};

• 保存完成后已经有setActionPerformed(false)，逻辑保持不变即可；页面刷新时actionPerformed默认值为false，按钮默认隐藏，符合预期。

4. 修复useEffect不必要的触发
   获取店铺列表的useEffect依赖改为空数组，只在组件初始化时执行一次：

useEffect(() => {
  getShopsList();
}, []);

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