React Web应用中如何在onClick中调用多个ES6函数（含getClickCount）？

当然可以在React的onClick事件中额外调用getClickCount()函数，你的代码报错主要是两个问题：箭头函数语法错误，以及没有给getClickCount()传递必要的id参数。

错误原因分析 #

你原本的onClick箭头函数写法存在语法问题：

onClick={
  () =>
   getClickCount(),
    navigate("blogDetails", {
      state: { id, date, photo, heading, blogDetails, reactCode }
    }) 
  }

• 箭头函数未用大括号{}包裹多语句，逗号会被当作逗号运算符，只会执行最后一个navigate语句，且整体语法不符合规范
• getClickCount()定义时需要接收id参数，但调用时未传递

正确实现方式 #

只需用大括号包裹箭头函数内的多语句，依次调用两个函数，同时给getClickCount()传入当前项的id：

// 你的getClickCount函数定义本身没问题，只需确保调用时传参
const getClickCount = (id) =>{
    console.log(id);
    const params = {
      id: id
    }
    // 若有后续逻辑（比如上报统计接口）可在此补充
  }

// 修正后的onClick事件处理
<div className='blogImageSection'
  onClick={() => {
    getClickCount(id); // 先调用统计函数
    navigate("blogDetails", { // 再执行页面跳转
      state: { id, date, photo, heading, blogDetails, reactCode }
    }) 
  }}
>

完整修正后的代码片段 #

const getClickCount = (id) =>{
    console.log(id);
    const params = {
      id: id
    }
  }

<div className='blogArea'>
    {!results.length && (<div className="noSearchData"><Wave text="Sorry, we couldn't find any results..!" /></div>)}
      {results.map(({ id, date, photo, heading, blogDetails, reactCode }) => (
        <a key={id}>
          <div className='blogImageSection'
            onClick={() => {
              getClickCount(id);
              navigate("blogDetails", {
                state: { id, date, photo, heading, blogDetails, reactCode }
              }) 
            }}
          >
            <img alt="id" src={photo} className="mainblogImage"/>
            <div key={id} className='dataArea'>
              <span className='dataDate'>{date}</span>
              <span className='tags'>cypress</span>
              <h3>{heading}</h3>
              <p className="textElipsis">
                Best heading added here.
                The most relevant data added here.
                Greatest of all time. Wont be a good idea
                play here always.This to again adding most of the
                details to the react page. Successfully.
                     <code>
                        {reactCode}
                     </code>
              </p>
              <a href="_blank" className="readmoreLink">
                Read more →
              </a>
            </div>
          </div>
        </a>
      ))}
    </div>

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