Question

我正在使用react-resizable库来调整表中列的大小。

使用元素库的API，可以在元素大小调整开始和结束时调用onSortStart和onSortStop。

在登录触发的回调时，我只在调整大小开始时看到一次日志，而在调整大小停止时看到一次日志-到目前为止很好。

但是我想要的是能够返回一个布尔值标志，在调整大小开始时为true，在调整大小停止时为false。

问题在于，每次重新创建/渲染我的useStateful自定义钩子时，状态都会改变。因此，我获得了变量isResizing的数百个更新版本。

如何使isResizing在启动时返回true，而在停止时返回false？

这是我的代码：

const ResizableColumn = (props: ResizableColumnProps): ReactElement => {
    const { onResizeStart, onResizeStop } = useStateful();

    const {
        onResize, width, className, children, style,
    } = props;

    if (!width) {
        return <th className={className} style={style}>{children}</th>;
    }
    return (
        <Resizable
            width={width}
            height={0}
            onResize={onResize}
            minConstraints={[150, 150]}
            draggableOpts={{ enableUserSelectHack: false }}
            onResizeStart={onResizeStart}
            onResizeStop={onResizeStop}
        >
            <th className={className} style={style}>{children}</th>
        </Resizable>
    );
};
export default ResizableColumn;

useStateful：

const useStateful = (): any => {
  const [isResizing, setIsResizing] = useState(false);
  const onResizeStart = (): void => {
    console.log('%c Resizing Started!', 'color: green;'); // logs once - perfect
    setIsResizing(true);
  };
  const onResizeStop = (): void => {
    console.log('%c Resizing Stopped!', 'color: green;'); // logs once - perfect
    setIsResizing(false);
  };
  console.log('%c isResizing', 'color: green;', isResizing); // logs hundreds of times with different values

  return { isResizing, onResizeStart, onResizeStop };
};
export default useStateful;

我也尝试过使用useRef，但是发生了同样的事情：

const useStateful = (): any => {

  const isResizing = useRef<boolean>();

  const onResizeStart = (): void => {
    console.log('%c Resizing Started!', 'color: green;'); // logs once - perfect
    isResizing.current = true;
  };
  const onResizeStop = (): void => {
    console.log('%c Resizing Stopped!', 'color: green;'); // logs once - perfect
    isResizing.current = false;
  };
  console.log('%c isResizing', 'color: green;', isResizing.current); // logs hundreds of times with different values

  return { isResizing, onResizeStart, onResizeStop };
};
export default useStateful;

Answer 1

Ciao，我看了很长时间的代码，唯一要注意的是，与使用自定义行的行相比，在自定义钩子useStateful上返回的元素数量有所不同钩。我举了一个小例子here。

自定义钩子在概念上与您的钩子相同：

const useStateful = () => {
   const [isResizing, setIsResizing] = useState(false);

   const onResizeStart = () => {
     setIsResizing(true);
     console.log("onResizeStart");
   };

   const onResizeStop = () => {
     setIsResizing(false);
     console.log("onResizeStop");
   };

   console.log(isResizing);
   return [isResizing, onResizeStart, onResizeStop];
};

但是，当我使用此挂钩时，我写道：

const [isResizing, onResizeStart, onResizeStop] = useStateful();

就这样。我知道我的示例可能不是您要查找的示例，但是重新创建环境有些棘手。

仅在React中触发回调时才从状态返回值

1 个答案: