[Slider] 在Dialog->table->td中使用Slider，当onchange改变值事件后会报错

[ArSrNa]

tdesign-react 版本

1.7.0

重现链接

https://codesandbox.io/p/sandbox/slider-plc2j9

重现步骤

在一个Dialog组件中，放有ali-react-table的BaseTable组件，其列为一个滑动条Slider，作用为改变data[行数].a 的值

如果把 onChange 事件改为console.log或者不更改自身值的事件，则正常。同时，在里面无论是使用表单场景，还是ref，只要控制到自身的值就会报错。

基础代码如下：

export default function App() {
  const [show, setShow] = useState(false);
  const [data, setData] = useState([{ a: 0 }, { a: 150 }, { a: 90 }]);

  function changeCol(i: number, obj: any) {
    setData((prev) => {
      let newArr = [...prev];
      newArr[i] = { ...newArr, ...obj };
      return newArr;
    });
  }

  function TableDialog() {
    return (
      <BaseTable
        columns={[
          {
            name: "test",
            title: "测试",
            render: (_, row, rowIndex) => (
              <Slider
                min={0}
                max={200}
                value={row.a}
                onChange={(e) => changeCol(rowIndex, { a: e })}
              />
            ),
          },
        ]}
        dataSource={data}
      />
    );
  }

  return (
    <div>
      <button
        onClick={() => {
          setShow(true);
        }}
      >
        打开dialog
      </button>

      <Dialog
        closeOnOverlayClick={false}
        width="90%"
        placement="center"
        onCloseBtnClick={() => setShow(false)}
        visible={show}
        header="测试设置"
        onClose={() => setShow(false)}
      >
        <TableDialog />
      </Dialog>
    </div>
  );
}

期望结果

滑块正常拖动，正常改变数值

实际结果

滑动的时候报错，Cannot read properties of null (reading 'getBoundingClientRect')

框架版本

React 18.2.0

浏览器版本

Edge 120.0.2210.91

系统版本

No response

Node版本

20.0

补充说明

No response

[github-actions]

👋 @ArSrNa，感谢给 TDesign 提出了 issue。
请根据 issue 模版确保背景信息的完善，我们将调查并尽快回复你。

[HaixingOoO]

@ArSrNa 您好，建议你把TableDialog 这个函数提升成组件，因为你写成函数，每次修改值都会重新渲染Slider组件的，然后Slider组件的ref获取值有时是会获取不到，所以会有错误的问题

[ArSrNa]

提升后不再报错，已解决

  function TableDialog({ changeCol, data }) {
    return (
      <BaseTable
        columns={[
          {
            name: "test",
            title: "测试",
            render: (_, row, rowIndex) => (
              <Slider
                min={0}
                max={200}
                value={row.a}
                onChange={(e) => changeCol(rowIndex, { a: e })}
              />
            ),
          },
        ]}
        dataSource={data}
      />
    );
  }


export default function App() {
  const [show, setShow] = useState(false);
  const [data, setData] = useState([{ a: 0 }, { a: 150 }, { a: 90 }]);

  function changeCol(i: number, obj: any) {
    setData((prev) => {
      let newArr = [...prev];
      newArr[i] = { ...newArr, ...obj };
      return newArr;
    });
  }


  return (
    <div>
     ......
      <Dialog   ......>
        <TableDialog changeCol={changeCol} data={data} />
      </Dialog>
    </div>
  );
}