<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`
这并没有太大帮助 Failed prop type: Invalid prop `onClick` of type `object` supplied to `Button`, expected `function`
答案 0 :(得分: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')))