useEffect修改React JS后渲染组件

发布于 2025-01-11 14:04:51 字数 1031 浏览 0 评论 0原文

我正在创建一个电视应用程序，我需要创建一个带有随机代码值的二维码，该随机代码值可以从 localStorage 获取，也可以在 localStorage 为空时动态创建。我面临的问题是，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 值后重新渲染组件。

原文

I'm creating an app for TV and I need to create a QR Code with a value of a random code either fetched from localStorage or created on-the-fly if localStorage is null. The problem I'm facing is that the QR component is not being created on the first render (because "accessCode" is null), but after useEffect fills "accessCode", it still isn't being generated.
The code:

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

I can't figure out how to re-render the component after the accessCode value has been updated.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

枫以 2025-01-18 14:04:51

Nullish Coalescing Operator (??) 会阻止呈现 QRCode 组件，因为当 accessCode 存在时，表达式不为 null/未定义。

请改为使用 && 进行更改。

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

说明：

?? 运算符将返回“当其左侧操作数为 null 或未定义时，其右侧操作数，否则返回其左侧操作数”。

在您的情况下，当 accessCode 与 null 不同时，表达式 accessCode !== null 为 false，因此?? 将返回左侧操作数 (false)，因此不会显示任何内容。

The Nullish Coalescing Operator (??) is preventing the QRCode component to be rendered because the expression is not null/undefined when acessCode exists.

Change with && instead.

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

Explanation:

?? operator will return "its right-hand side operand when its left-hand side operand is null or undefined, and otherwise returns its left-hand side operand".

In your case, when accessCode is different than null, the expression accessCode !== null is false, so ?? will return the left-hand side operand (false), so nothing will be displayed.

回复收藏 0 原文

夏の忆 2025-01-18 14:04:51

似乎为我工作，

请参考以下代码沙箱

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

Seems like working for me,

Please refer the below code sandbox

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

You may need to check how you are using the nullish operator change your operator to this

 {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"
        />)})

for more on nullish coalescing operator refer https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Nullish_coalescing_operator

回复收藏 0 原文

~没有更多了~