React Redux - mapDispatchToProps调用每个事件在一个映射函数

Question

在我的组件中，我有一个'OnClick'处理程序，它应该在mapDispatchToProps中触发一个名为'onSelectProject'的函数，该函数将操作分派到存储。在本例中，它传递从click事件

传递的项目id。我遇到的问题是，onSelectProject是触发每一个项目上的一次点击。如果我有10个项目，函数中的console.log将显示10次，每个项目一次。

index.js (ProjectComponent)

export function ProjectComponent({
selectedProject,
projects,
onSelectProject,
onGetProjects,
}) {
useInjectReducer({ key, reducer });
useInjectSaga({ key, saga });
useEffect(() => {
onGetProjects();
}, []);
return (
{ projects.map((project, index) => {
return <ul key={project.id} className="project">
<li>{project.name}</li>
<li>{project.createdAt}</li>
<li><a onClick={onSelectProject(project.id)} href="#" title="Preview this Project"><img src={view_icon} alt="view through icon"/></a></li>
</ul>
})}
);
}
const mapStateToProps = createStructuredSelector({
projects: makeSelectProjects(),
selectedProject: makeSelectProject()
});
export function mapDispatchToProps(dispatch) {
return {
onSelectProject: (id) => {
console.log(id); 
dispatch(selectProject(id));
}
onGetProjects: () => {
dispatch(getProjects());
}
};
}
const withConnect = connect(
mapStateToProps,
mapDispatchToProps,
);
export default compose(
withConnect, 
)(ProjectComponent);

为什么onSelectProject被触发为每个项目在一个单一的点击?

我可以提供更多的代码，如果需要或要求。

Answer 1

确保传递函数引用而不是实际调用，因此您的函数不会在每次渲染时调用，而是在您实际单击按钮时调用:

onClick={() => onSelectProject(project.id)}