Estoy creando una aplicación para TV y necesito crear un código QR con un valor de un código aleatorio obtenido de localStorage o creado sobre la marcha si localStorage es nulo. El problema al que me enfrento es que el componente QR no se crea en el primer procesamiento (porque "accessCode" es nulo), pero después de que useEffect llena "accessCode", todavía no se genera. El código:
const Login = () => { const [isLoading, setLoading] = useState(null); const [accessCode, setAccessCode] = useState(localStorage.getItem("access_code")); const [qrCode, setQRCode] = useState(null) useEffect(() => { let retrievedCode = localStorage.getItem("access_code"); if (!retrievedCode) { retrievedCode = randomString(6, { special: false }).toUpperCase(); } setAccessCode(retrievedCode); localStorage.setItem("access_code", retrievedCode); }, []); return ( <div className={styles.appMobileLogin}> {accessCode !== null ?? ( <QRCode className={styles.qrContainer} value={accessCode} renderAs="svg" size={300} level="H" />)}) </div> }No sé cómo volver a renderizar el componente después de actualizar el valor del código de acceso.
El operador coalescente nulo (??) impide que se represente el componente QRCode porque la expresión no es nula/indefinida cuando existe acessCode .
Cambie con && en su lugar.
{accessCode !== null && ( <QRCode className={styles.qrContainer} value={accessCode} renderAs="svg" size={300} level="H" />)})Explicación:
?? El operador devolverá "su operando del lado derecho cuando su operando del lado izquierdo es nulo o indefinido, y de lo contrario devuelve su operando del lado izquierdo".
En su caso, cuando accessCode es diferente a null , la expresión accessCode !== null es false , entonces ?? devolverá el operando del lado izquierdo (falso), por lo que no se mostrará nada.
Parece que trabaja para mí,
Consulte el siguiente código sandbox
https://codesandbox.io/s/affectionate-minsky-qr3n0f?file=/src/App.js
Es posible que deba verificar cómo está utilizando el operador nulo, cambie su operador a este
{accessCode !== null ? ( <QRCode className={styles.qrContainer} value={accessCode} renderAs="svg" size={300} level="H" />) : null})o
{accessCode !== null && ( <QRCode className={styles.qrContainer} value={accessCode} renderAs="svg" size={300} level="H" />)})para obtener más información sobre el operador coalescente nulo, consulte https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator