Tengo estas dos preguntas sobre JS. Debo decir que realmente he investigado pero no pude encontrar nada sobre ellos.
Las preguntas son:
console.log e identificadores de variables ( var , let , const ) dentro de una clase, fuera de funciones/métodos? class App extends Component { console.log(this) <--* ['Unexpected keyword or identifier'] let a = 1 <--* ['Unexpected token'] state = { <--* [variable without identifier is alright] characters: [ { name: 'Charlie', job: 'Janitor' }, etc... } removeCharacter = (index) => { console.log(this) <--* [works here normally] const characters = this.state.characters etc... }) }) ... } const TableBody = (props) => { const rows = props.characterData.map((row, index) => { return ( <tr key={index}> <td>{row.name}</td> <td>{row.job}</td> [this] *--> <button onClick={() => props.removeCharacter(index)}>Delete</button> </tr> ) [instead of something like] *--> <button onClick={props.removeCharacter(index)}>Delete</button> Quiero decir, props.removeCharacter(index) ya es una llamada, ¿no?
¡Gracias!
Tu puedes hacer
class TheClass { theProperty = 'theValue'como parte de la sintaxis de campo de clase , que es azúcar de sintaxis para
class TheClass { constructor() { this.theProperty = 'theValue'Es solo para asignar propiedades a la instancia, y nada más.
console.log(this) no funciona porque no tiene sentido allí: no está asignando una propiedad, es solo una expresión flotante.
let a = 1 no funciona porque no puede declarar una nueva variable allí: el { de una clase no crea un nuevo bloque. El uso de campos de clase se asigna a las propiedades de la instancia y no crea nuevos identificadores independientes.
¿Por qué una función necesita que otra función sea llamada?
En esta situación, es necesario porque necesita pasar un argumento. Si removeCharacter no aceptaba un argumento, podrías hacerlo
<button onClick={props.removeCharacter}>Pero acepta un argumento, que se espera que sea el índice. Pero el argumento predeterminado que se pasa a un controlador de clics es el evento .
no puedes hacer
onClick={props.removeCharacter(index)} porque eso invocaría removeCharacter inmediatamente. seria equivalente a
const result = props.removeCharacter(index); // ... <button onClick={result} que no es la lógica que se necesita: desea que se llame a removeCharacter cuando se haga clic en el botón, no cuando se cree el botón.