React App 在本地工作但在 CodePen 中出现意外令牌错误

Question

我正在为使用 codepen 作为环境的工作面试进行编码测试。我过去一天在本地工作，在将代码复制粘贴到 codepen 后，我在 render( <App />, document.getElementById('root')). 收到意外令牌错误我已经进行了三重检查以确保它不仅仅是一个闭合的大括号或其他东西。

在详细 (chrome) 下的检查工具中，我得到 25 [违规] 向滚动阻塞事件添加了非被动事件侦听器。考虑将事件处理程序标记为 'passive' 以使页面更具响应性。请参阅“它们用于不属于应用程序的鼠标滚轮事件和触摸等。其他消息来源说这不是引起关注的原因。我有点不知所措，希望有人能提供一些见解。是codepen 不适合管理一个相当复杂的管理多个状态的 React 应用程序？

Chrome 检查员建议向事件侦听器添加被动，我有两个分配给特定的 onChange 事件但已尝试注释掉以查看是否可以解决问题但无济于事。我如何通过 HTML 将此被动参数添加到事件侦听器。只有我见过的例子使用它。

document.addEventListener('touchstart', onTouchStart, {passive: true})

下面是我的 onChange 处理程序

    <input
            ref={donationAmountRef}
            className="donation-input"
            name="dollar-input"
            type="text"
            placeholder="$"
            // onChange={(errorHandler, (e) => onChangeHandler(e))}
            onChange={(e) => {
              errorHandler();
              onChangeHandler(e);
            }}
          ></input>

这是预期结果的图片。

Answer 1

暂时忽略 [Violation]。您的问题是 Unexpected token，这表明语法错误导致您的代码根本无法编译。

您的 Button 出了点问题。如果您说这是在本地工作，那么这不可能与您使用的代码相同运行.

const Button = (props) => {

  const onClickHandler = () => {
 
    const onClickHandler = () => {
    props.setUserState({
      ...props.userState,
      isDonating: true,
    });
    
  };

  return (
    <div className="button" onClick={onClickHandler}>
      <p>Give Now!</p>
    </div>
  );
};

有 4 个左大括号和 3 个右大括号。您的语法错误，以及 Unexpected token.

的原因

Button 组件没有 return 任何东西 - 其中唯一的东西是 onClickHandler。（而且，令人费解的是，onClickHandler 包含另一个 onClickHandler。）

我假设在将您的代码复制到 CodePen 时出了点问题。

React App 在本地工作但在 CodePen 中出现意外令牌错误

React App works locally but getting Unexpected Token error in CodePen

javascript

reactjs

babeljs

codepen