React/Redux技术疑问：如何将map遍历值传入自定义函数

嘿，我看你现在卡在怎么给最近搜索列表的点击事件正确传递参数，进而触发Redux的dispatch操作这一步了，咱们来一步步搞定这个问题～

首先得指出你当前代码里的小问题：你现在直接写onClick={this.onClickRecentSearches(search.query, search.location)}的话，组件一渲染这个函数就会立刻执行，而不是等你点击的时候才触发，这显然不是你想要的效果对吧？

给你两种可行的解决方案，按需选择就行：

方案1：用箭头函数包裹点击回调（最直观） #

把点击事件改成箭头函数的形式，这样只有当用户点击时才会调用你的自定义函数并传入参数：

<ul className="sidebar__list">
  {searches.map((search, i) => {
    return (
      <li className="sidebar__listItem" key={i}>
        <Link 
          to="/venues" 
          onClick={() => this.onClickRecentSearches(search.query, search.location)} 
          className="sidebar__listItemLink"
        >
          {search.query} in {search.location}
        </Link>
      </li>
    );
  })}
</ul>

然后在你的类组件方法里，就可以接收这两个参数并触发Redux dispatch了：

onClickRecentSearches = (query, location) => {
  // 这里可以根据需求先做一些前置处理，比如校验参数
  this.props.dispatch({
    type: 'SET_RECENT_SEARCH', // 替换成你的实际action type
    payload: { query, location }
  });
};

方案2：使用bind预先绑定参数（性能友好） #

如果你的最近搜索列表项很多，担心箭头函数每次渲染创建新函数的微小性能影响（大部分场景下其实可以忽略），可以用bind在map的时候预先把参数绑定到函数上：

<ul className="sidebar__list">
  {searches.map((search, i) => {
    // 预先绑定当前search的参数到回调函数
    const handleClick = this.onClickRecentSearches.bind(this, search.query, search.location);
    return (
      <li className="sidebar__listItem" key={i}>
        <Link 
          to="/venues" 
          onClick={handleClick} 
          className="sidebar__listItemLink"
        >
          {search.query} in {search.location}
        </Link>
      </li>
    );
  })}
</ul>

对应的onClickRecentSearches方法写法和方案1完全一样，就能正常接收参数并触发dispatch啦。

另外提一句：如果你的组件是用connect高阶组件连接Redux的，也可以把dispatch直接映射到props里，或者用mapDispatchToProps来定义绑定好的action creator，这样代码会更整洁，但上面的两种基础方案已经能解决你当前的核心问题了。

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