React中通过data属性传对象给点击函数显示[object Object]如何解决

HTML原生属性仅支持字符串类型值，你直接向data属性传入对象时，React会自动调用对象的toString()方法做类型转换，普通对象转换后的结果就是字符串[object Object]，因此通过getAttribute拿到的永远是这个字符串，无法获取原始对象内容。
另外你的代码中还存在一处语法错误：let arr = {}定义的是普通对象，对象不存在push方法，执行arr.push()时会直接抛出类型错误，如果需要存储多条数据，需将其初始化为数组const arr = []。

优先推荐使用React事件传参的标准写法，无需绕DOM属性传递数据，写法最简洁也最不容易出错：

方案1：直接通过 onClick 回调传参（推荐） #

修改按钮代码，在onClick的箭头函数中直接把对象作为参数传入处理函数：

<button onClick={() => handleToggleModal({ id: value.tempid, demoUrl: value.demolink })}>
  More Info
</button>

对应的事件处理函数直接接收对象参数即可，不需要从事件对象中读取DOM属性：

function handleToggleModal(data) {
  const arr = [];
  arr.push(data);
  console.log(data); // 直接输出{ id: xxx, demoUrl: xxx }完整对象
}

方案2：序列化后通过data属性传递 #

如果一定要通过DOM属性传递对象，可以在传值时先把对象转为JSON字符串，读取后再反序列化为对象：

<button 
  onClick={handleToggleModal} 
  data={JSON.stringify({ id: value.tempid, demoUrl: value.demolink })}
>
  More Info
</button>

处理函数中读取属性后做JSON解析：

function handleToggleModal(e) {
  const dataStr = e.currentTarget.getAttribute("data");
  const data = JSON.parse(dataStr);
  const arr = [];
  arr.push(data);
  console.log(data);
}

注意：该方案仅支持传递可被JSON序列化的简单数据，包含函数、undefined、循环引用的对象无法正常序列化。

方案3：拆分多个自定义data属性传递 #

如果传递的字段不多，可以拆分为多个独立的data-*属性，通过DOM元素的datasetAPI读取：

<button 
  onClick={handleToggleModal} 
  data-id={value.tempid} 
  data-demourl={value.demolink}
>
  More Info
</button>

处理函数读取逻辑：

function handleToggleModal(e) {
  const { id, demourl } = e.currentTarget.dataset;
  const data = { id, demoUrl: demourl };
  const arr = [];
  arr.push(data);
  console.log(data);
}

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