React中map渲染列表时如何将被点击元素的id传递给onClick函数

错误原因 #

1. 点击回调参数获取错误
   你给onClick回调定义的第一个参数id实际上是浏览器传入的点击事件对象，并不是你需要的业务id，同时你没有把map遍历拿到的result.id主动传入处理函数，这是代码不生效的核心原因。
2. 逻辑隐患
   如果else分支不返回内容需要显式返回null，避免React抛出渲染警告；直接使用外部的votes变量做+1操作容易出现过时闭包问题，导致计数更新不符合预期。

修复后代码 #

渲染部分修改

{finalResult.map((result) => {
  if(user.get("username") === result.author.username) {
    return <div className="central-meta item" key={result.id}>
    <div className="pit-post">
        <figure>
            <img src="images/resources/red-post2.jpg" alt="" />
            <i className="fa fa-video"></i>
        </figure>
        <div className="pit-post-deta">
            <h4><a href="social-post-detail.html" title="">{result.title}</a></h4>
            <ul className="post-up-time">
                <li>
                    <div className="usr-fig">
                        <img src="images/resources/comet-1.jpg" alt="" />
                        <a href="#" title="">p/{user.get("username")}</a>
                    </div>
                </li>
                <li><i className="fa fa-clock-o"></i> Jan 12, 2020</li>
            
                    <div className="smiles-bunch">
                        <i className="em em---1"></i>
                        <i className="em em-smiley"></i>
                        <i className="em em-anguished"></i>
                        <i className="em em-laughing"></i>
                        <i className="em em-angry"></i>
                        <i className="em em-astonished"></i>
                        <i className="em em-blush"></i>
                        <i className="em em-disappointed"></i>
                        <i className="em em-worried"></i>
                        <i className="em em-kissing_heart"></i>
                        <i className="em em-rage"></i>
                        <i className="em em-stuck_out_tongue"></i>
                    </div>
                </li>
            </ul>
        </div>
        <div className="number">
            {/* 主动把当前遍历的result.id传入处理函数 */}
            <span className="plus" onClick={() => addVotes(result.id)}><i className="fa fa-angle-up"></i></span>                                                     
            <input type="text" value="0"/>
            {/* 减号如果需要传id同理修改 */}
            <span className="minus" onClick={() => decreaseVotes(result.id)}><i className="fa fa-angle-down"></i></span>
        </div>
    </div>
</div>
  } else {
    console.log("none")
    return null
  }
})} 

处理函数优化

const addVotes = (id) => {
  setClicked(true);
  // 匹配对应id的数据项，避免把id当数组索引导致的取值错误
  const target = data.find(item => item.id === id);
  if(!target) return;
  // 从数据项本身取当前投票数更新，规避闭包问题
  target.set("votes", target.get("votes") + 1);
  target.save();
  // 如果data是组件状态，需要更新状态触发页面重渲染
  setData([...data]);
}

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