GitLab

在Table的Operate中onClick绑定的事件如果没有用useMethods包裹可能会出现无法实时获取到最新的state问题

示例1；未使用useMethods

// stats 
const [priceConfigEnum, setPriceConfigEnum] = useState<any[]>([]);

// hooks
useEffect(() => {
    post('xx').then((res) => setPriceConfigEnum([...res]))
}, [])

// ...colunms
{
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
      width: 100,
      render(_: string, record: any) {
        const { permissions = [] } = record;
        return <Operate showBtnCount={5} onClick={(key: string) => onAction(key, record)} operateList={permissions} />;
      }
    }

// methods
const onAction = (key: string, record) => {
    switch (key) {
      case 'suspend':
        onSuspend(record);
        break;
      case 'stop':
        onStop(record);
        break;
      case 'recovery':
        onRecovery(record);
        break;
      default:
        console.log(priceConfigEnum, '我直接在这里打印');
        onUpdate(record);
        break;
    }
  };
// 最后结果： 在`onAction`中打印`priceConfigEnum`依旧是空数组

示例2；使用useMethods

// stats 
const [priceConfigEnum, setPriceConfigEnum] = useState<any[]>([]);

// hooks
useEffect(() => {
    post('xx').then((res) => setPriceConfigEnum([...res]))
}, [])

// ...colunms
{
      title: '操作',
      dataIndex: 'action',
      fixed: 'right',
      width: 100,
      render(_: string, record: any) {
        const { permissions = [] } = record;
        return <Operate showBtnCount={5} onClick={(key: string) => methods.onAction(key, record)} operateList={permissions} />;
      }
    }

// methods
const methods = useMethods({
   onAction(key: string, record) {
      switch (key) {
        case 'suspend':
          onSuspend(record);
          break;
        case 'stop':
          onStop(record);
          break;
        case 'recovery':
          onRecovery(record);
          break;
        default:
          console.log(priceConfigEnum, '我直接在这里打印');
          onUpdate(record);
          break;
      }
    }
});
// 最后结果： 在`onAction`中打印`priceConfigEnum`状态正常

最后的最后，建议在组件内定义方法时都可以使用useMethods，一来是代码可读性更高，二来能避免重复声明带来的性能消耗