为什么在动态重新生成html时不能将对象作为函数参数传递？

Question

当我将对象数组作为参数传递给脚本中的函数时，我不会遇到任何问题。但是，当我尝试动态渲染某些html时做同样的事情时，就会出现问题。我收到以下错误-  “未捕获的SyntaxError：意外的标识符”。更具体一点， 单击渲染的bottun时出现错误，我的控制台中出现“ rend2（[object Object]，[object Object]）”

const arri = [obj, obj2];

function rend(data) {
  console.log(data);
  let html;
  let content = document.getElementById('my-list');
  html = '<button onclick="rend2(' + data + ')">click</button>';
  content.insertAdjacentHTML('beforeend', html);
  console.log('obj', data);
}

function rend2(obj) {
  console.log('obj', obj);
}