Range 组件的滑动事件处理未判断组件已卸载的情况，导致滑动立即离开时会报错

[whinc]

NutUI React 包名

@nutui/nutui-react-taro

NutUI React 版本号

2.3.12

平台

weapp

重现链接

无

重现步骤

对于下面代码，滑动结束后立即隐藏 Range，控制台会报错

const [visible, setVisible] = useState(true)

<Range visible={visible} onEnd={() => setVisible(false)} />

期望的结果是什么？

不报错

实际的结果是什么？

报错如下

TypeError: Cannot read property 'width' of null
    at _callee2$ (._node_modules_.pnpm_@[email protected]_@[email protected][email protected][email protected][email protected]_node_modules_@nutui_nutui-react-taro_dist_esm_range.taro-BxMDs5Cy.js:197)
    at tryCatch (VM3592 vendors.js:1808)
    at Generator.<anonymous> (VM3592 vendors.js:1808)
    at Generator.next (VM3592 vendors.js:1808)
    at fulfilled (VM3592 vendors.js:98)(env: macOS,mp,1.06.2401020; lib: 2.30.0)

环境信息

No response

其他补充信息

原因分析：源码的 onTouchMove 中更新状态前，应当判断下组件是否已卸载

https://github.com/jdf2e/nutui-react/blob/next/src/packages/range/range.taro.tsx#L283-L315

[eiinu]

Range 组件没有 visible 属性。
如果是像下面这种通过 if 控制组件的展示的话，也无法复现 issue 中描述的问题

import React, { useState } from 'react'

const App = () => {
  const [visible, setVisible] = useState(true)
  return <>
    {visible ? <Range onEnd={() => setVisible(false)} /> : null}
  </>
}

export default App
``

[github-actions]

你好 @whinc, 我们需要你提供一个在线的重现实例以便于我们帮你排查问题。你可以通过点击 此处 创建一个 codesandbox 或者提供一个最小化的 GitHub 仓库。请确保选择准确的版本。

[whinc]

Range 组件没有 visible 属性。 如果是像下面这种通过 if 控制组件的展示的话，也无法复现 issue 中描述的问题

import React, { useState } from 'react'

const App = () => {
  const [visible, setVisible] = useState(true)
  return <>
    {visible ? <Range onEnd={() => setVisible(false)} /> : null}
  </>
}

export default App
``

我做了一个仓库可复现：https://github.com/whinc/taro-demo

最小复现代码

import { Range } from "@nutui/nutui-react-taro";
import { View } from "@tarojs/components";
import { useState } from "react";
import "./index.scss";

export default function Index() {
  const [visible, setVisible] = useState(true);
  const [value, setValue] = useState(10);

  return (
    <View style={{ marginTop: "100rpx" }}>
      {visible && (
        <Range
          min={0}
          max={100}
          value={value}
          onChange={(v) => setValue(v)}
          onEnd={() => setVisible(false)}
        />
      )}
    </View>
  );
}

具体表现：拖动滑块过程中，快速离开滑块，触发 onEnd 事件。