ReactJS中使用Material-Table时出现多个prop类型报错如何解决？

现有业务代码如下（已按合规要求隐藏表头、字段名和接口地址）：

import React, { useState, useEffect } from 'react';
import './App.css';
import MaterialTable from 'material-table'


function App() {

  const [data, setData] = useState([])
  const columns = [
    { title: "x", field: "x" },
    { title: "x", field: "x" },
    { title: "x", field: "x" },
    { title: "x", field: "x" },
    { title: "x", field: "x" },
    { title: "x", field: 'x' },
    { title: "x", field: 'x' },
    { title: "x", field: 'x' },
  ]
  useEffect(() => {
    fetch("API_URL")
      .then(resp => resp.json())
      .then(resp => {
        setData(resp)
      }) 
  }, [])

  return (
    <div className="App">
      <h1 align="center">x</h1>
      <h4 align='center'>x</h4>
      <MaterialTable
        title="Table View"
        data={data}
        columns={columns}
      />
    </div>
  );
}

export default App;

• 警告1：Prop类型校验失败：ForwardRef(TablePagination)的onChangePage属性已废弃，请改用onPageChange属性，后附组件调用栈。
• 警告2：Prop类型校验失败：ForwardRef(TablePagination)的onChangeRowsPerPage属性已废弃，请改用onRowsPerPageChange属性，后附组件调用栈。
• 警告3：Prop类型校验失败：ForwardRef(TablePagination)中onPageChange是必填属性，但传入的值为undefined，后附组件调用栈。
• 警告4：Prop类型校验失败：传入MaterialTable的data属性无效，后附组件调用栈。

• 前3个警告均为依赖版本不兼容导致：你使用的material-table版本和项目中安装的Material UI（MUI）版本不匹配，新版本MUI重构了TablePagination组件的API，废弃了原有的onChangePage、onChangeRowsPerPage属性，替换为onPageChange、onRowsPerPageChange，且onPageChange为必填属性，但旧版material-table仍在使用旧API传参，因此触发废弃警告和必填属性缺失警告。
• 第4个警告为接口返回数据格式不符合要求：MaterialTable要求data属性必须传入数组类型，你直接将接口返回的完整响应赋值给data，若接口返回的是带外层包装的对象（如包含状态码、消息、数据字段的结构体），会导致data不是数组类型，触发属性校验失败。

• 解决版本兼容问题，二选一即可：
  • 方案1：降级MUI到匹配版本。如果你使用的是旧版官方material-table，将@material-ui/core降级到4.x版本即可适配，执行命令：
    npm install @material-ui/core@4.12.4
  • 方案2：换用适配新版MUI的表格组件。卸载原material-table，安装社区维护的适配MUI v5+的分支@material-table/core，执行命令：
    npm uninstall material-table && npm install @material-table/core
    同时修改代码引入路径：
    import MaterialTable from '@material-table/core'
• 解决data属性无效问题：修改fetch请求的回调逻辑，先校验接口返回格式，提取真正的数组数据赋值，同时添加异常捕获避免接口报错影响页面运行，修改后的useEffect代码如下：

useEffect(() => {
  fetch("API_URL")
    .then(resp => resp.json())
    .then(resp => {
      // 根据实际接口返回结构调整取值逻辑，保证最终传入的是数组
      const tableData = Array.isArray(resp) ? resp : resp?.data || []
      setData(tableData)
    })
    .catch(err => {
      console.error('数据请求失败', err)
      setData([])
    })
}, [])

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