Cuando estaba escribiendo el código de ReactJs a continuación, primero usé if(this.state.username==true) y no obtuve el resultado que esperaba. Pero cuando usé if(this.state.username) funcionó como lo necesitaba. Por lo tanto, obviamente puedo ver que hay una diferencia entre if(x==true) y if(x) . También sé que a veces pueden significar lo mismo y producir el mismo resultado. Mi pregunta es si mi constructor está configurado como se muestra a continuación, ¿por qué las dos expresiones se comportarían de manera diferente? ¿Cuál es el verdadero significado de if(this.state.username) aquí? Gracias por ayudarme a entender.
constructor(props){ super(props) this.state = {username:""} }Los dos códigos están a continuación:
class MyForm extends React.Component { constructor(props){ super(props) this.state = {username:""} } changeName = (e) =>{ let target = e.target; let name = target.name; let value = target.value; this.setState ({[name]: value}); } render(){ let myHeader; if(this.state.username==true){ myHeader = <h1>Hello {this.state.username}</h1>; }else{ myHeader = ""; } return ( <form> {myHeader} <h1>{this.state.username}</h1> <p>Enter your name:</p> <input name='username' type="text" onChange = {this.changeName} /> </form> ); } } ReactDOM.render(<MyForm />, document.getElementById('root')); <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>Y
class MyForm extends React.Component { constructor(props){ super(props) this.state = {username:""} } changeName = (e) =>{ let target = e.target; let name = target.name; let value = target.value; this.setState ({[name]: value}); } render(){ let myHeader; if(this.state.username){ myHeader = <h1>Hello {this.state.username}</h1>; }else{ myHeader = ""; } return ( <form> {myHeader} <h1>{this.state.username}</h1> <p>Enter your name:</p> <input name='username' type="text" onChange = {this.changeName} /> </form> ); } } ReactDOM.render(<MyForm />, document.getElementById('root')); <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>Hay una diferencia entre usar if(this.state.username==true) y if(this.state.username) . El uso del primero compara el valor de this.state.username con true , que por supuesto es falso a menos que devuelva un valor de cadena de 1 , en cuyo caso devolverá true .
Sin embargo, hacer lo último this.state.username en booleano y verifica si this.state.username tiene un valor (como no undefined ).
Entonces, si desea usar if(this.state.username==true) , primero tendrá que convertir this.state.username en booleano usando !! (o Boolean ):
if(!!this.state.username==true) { // your code goes here }el nombre de username del tipo de datos no es booleano sino una cadena, validación de cadena usando !== ''
Jaja, eso es tan divertido. Lo he probado con todas las verdades y falsedades. Veamos el resultado:
console.log('Truthies:') console.log('"a" == true returns:', "a" == true) console.log('"1" == true returns:', "1" == true) console.log('1 == true returns:', 1 == true) console.log('3 == true returns:', 3 == true) console.log('-1 == true returns:', -1 == true) console.log('[] == true returns:', [] == true) console.log('{} == true returns:', {} == true) console.log('function a(){return true} == true returns:', function a(){return true} == true) console.log('"true" == true returns:', "true" == true) console.log('') console.log('Falsies:') console.log('NaN == false returns:', NaN == false) console.log('"" == false returns:', "" == false) console.log('`` == false returns:', `` == false) console.log('0 == false returns:', 0 == false) console.log('undefined == false returns:', undefined == false) console.log('null == false returns:', null == false) console.log('') console.log('Truthies not-equal false:') console.log('"a" !== false returns:', "a" !== false) console.log('1 !== false returns:', 1 !== false) console.log('"1" !== false returns:', "1" !== false) console.log('3 !== false returns:', 3 !== false) console.log('-1 !== false returns:', -1 !== false) console.log('[] !== false returns:', [] !== false) console.log('{} !== false returns:', {} !== false) console.log('function a(){return true} !== false returns:', function a(){return true} !== false) console.log('"true" !== false returns:', "true" !== false) console.log('') console.log('Truthies not-equal true:') console.log('"a" !== true returns:', "a" !== true) console.log('1 !== true returns:', 1 !== true) console.log('"1" !== true returns:', "1" !== true) console.log('3 !== true returns:', 3 !== true) console.log('-1 !== true returns:', -1 !== true) console.log('[] !== true returns:', [] !== true) console.log('{} !== true returns:', {} !== true) console.log('function a(){return true} !== true returns:', function a(){return true} !== false) console.log('"true" !== true returns:', "true" !== true) Hay algunas cosas difíciles. Por ejemplo, tanto 1 == true como 1 !== true son true 😆.
De todos modos... es mejor que uses !! para permanecer en el lado seguro:
const { useState } = React const MyForm = () => { const [state, setState] = useState({ username: '' }) const handleChange = ({ target: { name, value } }) => { setState({ [name]: value }) } return ( <form> {!!state.username && ( <h1>Hello {state.username}</h1> )} <p>Enter your name:</p> <input name="username" type="text" onChange={handleChange} /> </form> ) } ReactDOM.render(<MyForm />, document.getElementById('root')); <script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script> <div id="root"></div>Y puede usar ganchos, componentes funcionales, operadores jsx en línea y deconstrucción para simplificar.