使用MaterialUI Lab的LoadingButton时出现forwardRef控制台警告

警告原因 #

你看到的这个警告，是因为某个被React.forwardRef包裹的组件，其渲染函数没有正确接收并处理ref参数。你的LoadData组件虽然没显式使用forwardRef，但如果父组件尝试给它传递ref，或者需要把ref透传给内部的LoadingButton，就会触发这个警告。

修复代码 #

把你的LoadData组件用React.forwardRef包裹，接收props和ref两个参数，并将ref传递给内部的LoadingButton：

import { LoadingButton } from "@mui/lab";
import React from "react";

const LoadData = React.forwardRef(({ loading, signinHandler }, ref) => (
  <LoadingButton
    ref={ref}
    loading={loading}
    variant="contained"
    sx={{ textTransform: "capitalize" }}
    onClick={signinHandler}
  >
    Login
  </LoadingButton>
));

export default LoadData;

补充说明 #

如果你的场景里不需要传递ref但仍出现警告，那大概率是父组件错误地给LoadData传了ref，要么按上面的方式处理ref，要么检查父组件代码，停止给LoadData传递ref。

内容的提问来源于stack exchange，提问作者Chukwuemeka Maduekwe