Javascript 期望 onClick 侦听器是一个函数，而不是得到类型对象 - 反应 redux
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/44833583/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Expected onClick listener to be a function, instead got type object - react redux
提问by faraz
As explained in the title, I am getting the error Expected onClick listener to be a function, instead got type object
正如标题中所解释的，我收到错误预期 onClick 侦听器是一个函数，而不是得到了类型对象
But I am unable to understand why this isnt working. as far as I know, the onClick listener IS a function.
但我无法理解为什么这不起作用。据我所知，onClick 侦听器是一个函数。
Here's, the CharacterList Component where the error comes from
这是错误来自的 CharacterList 组件
import React,{Component} from 'react';
import {connect} from 'react-redux';
import {addCharacterById} from '../actions';
import {bindActionCreators} from 'redux';
class CharacterList extends Component{
render(){
//console.log('name : ',this.props.characters[2].name);
return(
<div>
<h3>Characters</h3>
<ul>
{this.props.characters.map((character)=>{
return(<li key={character.id}>{character.name}
<div
onClick={this.props.addCharacterById(character.id)}
>+</div>
</li>);
})}
</ul>
</div>
)
}
}
function mapStateToProps(state){
return {
characters:state
}
}
export default connect(mapStateToProps,{addCharacterById})(CharacterList);
And here's the action creator
这是动作创建者
export const ADD_CHARACTER='ADD_CHARACTER';
export function addCharacterById(id){
var action ={
type:ADD_CHARACTER,
id
}
return action;
}
So, what do you guys think? what is the problem here?
那么，大家怎么看呢？这里有什么问题？
回答by punkbit
The problem is that you're invoking the function immediately and then what's left is the return value, which might not be a function!
问题是您立即调用该函数，然后剩下的是返回值，它可能不是函数！
What you can do instead is wrap that function call inside an arrow function to solve your problem. It'll call the inner function once you onClick:
您可以做的是将该函数调用包装在箭头函数中以解决您的问题。一旦你点击，它就会调用内部函数：
import React,{Component} from 'react';
import {connect} from 'react-redux';
import {addCharacterById} from '../actions';
import {bindActionCreators} from 'redux';
class CharacterList extends Component{
render(){
//console.log('name : ',this.props.characters[2].name);
return(
<div>
<h3>Characters</h3>
<ul>
{this.props.characters.map((character)=>{
return(<li key={character.id}>{character.name}
<div
onClick={() => this.props.addCharacterById(character.id)}
>+</div>
</li>);
})}
</ul>
</div>
)
}
}
function mapStateToProps(state){
return {
characters:state
}
}
export default connect(mapStateToProps,{addCharacterById})(CharacterList);
There's diferent ways of doing this, you could for example bind the parameter to the function, like:
有不同的方法可以做到这一点，例如，您可以将参数绑定到函数，例如：
{this.props.characters.map((character)=>{
return(<li key={character.id}>{character.name}
<div
onClick={this.props.addCharacterById.bind(null, character.id)}
>+</div>
</li>);
})}
Just shared as an example, so that you understand what's going on and why the first approach is more readable. You may want to look into why .bind in render is a bad practice by reading the article https://ryanfunduk.com/articles/never-bind-in-render/
仅作为示例分享，以便您了解发生了什么以及为什么第一种方法更具可读性。您可能想通过阅读文章来了解为什么 .bind in render 是一种不好的做法https://ryanfunduk.com/articles/never-bind-in-render/
回答by yahiramat
onClick={this.props.addCharacterById(character.id)}this part of your code will execute immediately upon render()is call what you may want to do instead is:
onClick={this.props.addCharacterById(character.id)}这部分代码将在render()调用时立即执行，您可能想做的是：
onClick={(e)=> {this.props.addCharacterById(e, character.id)}}
onClick={(e)=> {this.props.addCharacterById(e, character.id)}}
Remember the first parameter pass to onClickis the click event.
记住传递给的第一个参数onClick是点击事件。
回答by slorenzo
There are some things that you need to change if you want to have good practices.
如果您想拥有良好的实践，有些事情需要改变。
First, add mapDispatchToPropsfunction.
首先，添加mapDispatchToProps功能。
import { bindActionCreators } from 'redux';
...
function mapDispatchToProps(dispatch) {
return {
addCharacterById: bindActionCreators(addCharacterById, dispatch)
};
}
Second, the event handler could be:
其次，事件处理程序可以是：
onClick={() => this.props.addCharacterById(character.id)}
Third, export your component:
第三，导出你的组件：
export default connect(mapStateToProps, mapDispatchToProps)(CharacterList);
