在React的useEffect中添加ModalPage函数式组件出现报错该如何解决

问题1：ModalPage组件状态类型不匹配 #

你在ModalPage中初始化show状态为布尔类型，但更新状态时传入了对象，导致MDBModal的isOpen属性接收到非布尔值，触发类型错误。
修改ModalPage的toggle函数：

// 原错误写法
function toggle () {
  setShow({
   show: !show
  });
}

// 修改后正确写法
function toggle () {
  setShow(!show);
}

问题2：data状态初始值类型不匹配 #

你初始化data为空字符串，但后续赋值为包含columns、rows的对象，在接口请求未完成时，若渲染逻辑直接读取data.columns或data.rows会出现属性读取失败的报错。
修改data的初始值：

// 原错误写法
const [data, setData] = React.useState('');

// 修改后正确写法
const [data, setData] = React.useState({
  columns: [],
  rows: []
});

可选优化：不要在state中存储组件实例 #

你当前在rows的遍历逻辑中直接把<ModalPage/>实例存入state，不符合React最佳实践，建议仅在state中存储业务数据，渲染表格单元格时再生成ModalPage组件。

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