IT技术 - 失败的props类型：提供给“ButtonBase”的“object”类型的无效props“onClick”，预期为“function” - 吾爱随笔录

失败的props类型：提供给“ButtonBase”的“object”类型的无效props“onClick”，预期为“function”

IT技术 reactjs material-ui mobx mobx-react

2021-05-28 11:55:31

<Fab raised="true" size="small" color="primary" variant="extended"
        onClick={props.Store.fetchFromServer}

和

this.fetchFromServer = async () => {
await console.log('test')
}

工作正常。

但是当改为跟随时

<Fab raised="true" size="small" color="primary" variant="extended"
        onClick={props.Store.fetchFromServer('test')}

和

this.fetchFromServer = async (val) => {
await console.log(val)
}

抛出以下错误，我错过了什么？

Failed prop type: Invalid prop `onClick` of type `object` supplied to `ButtonBase`, expected `function`

这没有多大帮助失败的props类型：提供给“按钮”的“对象”类型的无效props“onClick”，预期的“功能”

1个回答

它失败了，因为一旦您将参数传递给函数，您就在调用它，因此它现在返回一个值（因此变为object）。解决这个问题的方法是onClick()像这样将匿名函数传递给事件，基本上将它变成一个函数：

onClick={e => props.Store.fetchFromServer('test')}

这是一个测试示例，向您展示以不同方式调用的函数类型：

a = function (val) {}
b = async (val) => {
  /* await console.log(val) */
}

console.log(typeof(a))
console.log(typeof(b))
console.log(typeof(a('test1')))
console.log(typeof(b('test2')))
console.log(typeof(() => b('test3')))

其它你可能感兴趣的问题

上一篇删除或添加行时，如何使用 React Hooks 刷新表？下一篇Express 服务器和 Axios CORS 预检响应不成功