Question

执行以下代码：

myshop.co.uk/product/product-name

我收到此错误：function Events (props){ const clickHandler = console.log; return (<button onClick={clickHandler}> Make an event </button>); } ReactDOM.render(<Events />, mountNode);

该代码来自Multiplesight ReactJS课程，当演示课程的人执行该代码时，他会在控制台中打印事件触发对象，而我却收到此错误。

Answer 1

您的错误很可能是因为jscomplete尝试JSON.stringify将其记录到控制台中。 React SyntheticEvent具有圆形结构，在其上使用JSON.stringify时会引起错误。

它可能在其他环境中工作，但是console.log也可能是异步的。这个问题在documentation about SynthenticEvent中出现：

如果要以异步方式访问事件属性，则可以应该在事件上致电event.persist()，这将删除池中的合成事件，并允许对该事件的引用为由用户代码保留。

因此，如果您打算异步使用该事件，则可以使用以下方法：

function Events (props){
  const clickHandler = (event) => {
    event.persist();
    console.log(event);
  };

  return (<button onClick={clickHandler}> Make an event </button>);
}

为什么会引发此JS错误？

1 个答案: