useEffect 修改后渲染组件 React JS

Question

我正在为电视创建一个应用程序，我需要创建一个 QR 码，其值是从 localStorage 获取的随机代码或在 localStorage 为 null 时即时创建的。我面临的问题是 QR 组件没有在第一次渲染时创建（因为“accessCode”为空），但在 useEffect 填充“accessCode”后，它仍然没有生成。代码：

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>
}

我不知道如何在更新 accessCode 值后重新呈现组件。

Answer 1

好像适合我，

请参考下面的代码沙箱

https://codesandbox.io/s/affectionate-minsky-qr3n0f?file=/src/App.js

您可能需要检查您是如何使用 nullish 运算符的，将您的运算符更改为此

 {accessCode !== null ? (
            <QRCode
            className={styles.qrContainer}
            value={accessCode}
            renderAs="svg"
            size={300}
            level="H"
        />) : null})

或

 {accessCode !== null && (
            <QRCode
            className={styles.qrContainer}
            value={accessCode}
            renderAs="svg"
            size={300}
            level="H"
        />)})

有关无效合并运算符的更多信息，请参阅 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

Answer 2

Nullish 合并运算符 (??) 阻止呈现 QRCode 组件，因为当 acessCode 存在时表达式不是 null/undefined。

改为 &&。

{accessCode !== null && (
            <QRCode
            className={styles.qrContainer}
            value={accessCode}
            renderAs="svg"
            size={300}
            level="H"
/>)})

解释：

?? 运算符在其 left-hand 侧操作数为空或未定义时将 return "其 right-hand 侧操作数，否则 return 其 left-hand 边操作数".

在你的例子中，当 accessCode 不同于 null 时，表达式 accessCode !== null 是 false，因此 ?? 将 return left-hand 副操作数 (false)，因此不会显示任何内容。

useEffect 修改后渲染组件 React JS

Render component after useEffect modification React JS

javascript

reactjs

use-effect