D3.js触发React事件时payload异常问题求助

问题核心是你搞反了D3事件处理函数的参数顺序。从D3 v6版本开始，事件处理函数的第一个参数是事件对象，第二个参数才是绑定的数据项。你现在把第一个参数当成了绑定的item，所以输出的是指针事件，自然拿不到预期的item属性。

下面是两种正确的写法：

普通函数写法 #

axisGroup
  .selectAll('.tick')
  .data<BaseItemI>(itemsInDomain)
  .style('cursor', 'pointer')
  .on('click', function(event, item) { // 第一个参数是event，第二个是绑定的item
    console.log('clicked', item);
    dispatch({
      type: SET_SELECTED_ITEM,
      payload: { item: item, baseItem: undefined }
    });
  });

箭头函数写法 #

箭头函数的参数顺序和普通函数完全一致，同样是先事件再数据：

axisGroup
  .selectAll('.tick')
  .data<BaseItemI>(itemsInDomain)
  .style('cursor', 'pointer')
  .on('click', (event, item) => { // 参数顺序不变
    console.log('clicked', item);
    dispatch({
      type: SET_SELECTED_ITEM,
      payload: { item: item, baseItem: undefined }
    });
  });

如果不需要使用事件对象（比如点击坐标这类信息），可以用下划线占位忽略该参数，写成.on('click', (_, item) => { ... })，但参数顺序绝对不能乱。

另外你提到的D3自身dispatch是它的内部事件系统，和React的dispatch不是一回事。在React项目里，只要修正参数顺序，就能把正确的item传入React的dispatch payload中。

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