Estoy trabajando en una prueba de codificación para una entrevista de trabajo que usa codepen como entorno. Trabajé localmente el día anterior y después de copiar y pegar el código en codepen, recibo un error de token inesperado en el render( <App />, document.getElementById('root')). He verificado tres veces para asegurarme de que no se trata solo de una llave cerrada o algo así.
En mi herramienta de inspección en detallado (cromo) obtengo 25 [Violación] Se agregó un detector de eventos no pasivo a un evento de bloqueo de desplazamiento. Considere marcar el controlador de eventos como "pasivo" para que la página responda mejor. Consulte " Son para eventos de la rueda del mouse y on-touch, etc. que no forman parte de la aplicación. Otras fuentes dicen que esto no es motivo de preocupación. Estoy un poco perdido y espero que alguien pueda proporcionar alguna información. Es codepen simplemente no es adecuado para administrar una aplicación React razonablemente compleja que administra múltiples estados?
El inspector de Chrome sugiere agregar pasivos a los oyentes de eventos, tengo dos asignados a un evento onChange en particular, pero he intentado comentar para ver si resolvería el problema en vano. ¿Cómo agregaría este argumento pasivo a un detector de eventos a través de HTML? Solo los ejemplos que he visto lo usan como tal.
document.addEventListener('touchstart', onTouchStart, {passive: true})A continuación se muestra mi controlador onChange
<input ref={donationAmountRef} className="donation-input" name="dollar-input" type="text" placeholder="$" // onChange={(errorHandler, (e) => onChangeHandler(e))} onChange={(e) => { errorHandler(); onChangeHandler(e); }} ></input>Ignora la [Violation] por ahora. Su problema es el Unexpected token , que sugiere un error de sintaxis que impide que su código se compile.
Algo anda mal con tu Button . Si dice que esto funciona localmente, entonces no hay forma de que sea el mismo código que está ejecutando.
const Button = (props) => { const onClickHandler = () => { const onClickHandler = () => { props.setUserState({ ...props.userState, isDonating: true, }); }; return ( <div className="button" onClick={onClickHandler}> <p>Give Now!</p> </div> ); }; Hay 4 llaves de apertura y 3 llaves de cierre. Ahí está su error de sintaxis y la causa del Unexpected token .
El componente Button no devuelve nada; lo único que contiene es onClickHandler . (E, inexplicablemente, onClickHandler contiene otro onClickHandler ).
Asumiré que algo salió mal al copiar su código en CodePen.