在 React 中检查 Variable 是否为 Null 或 Undefined

在 React 中检查变量是否为 Null 或 Undefined

Check if Variable is Null or Undefined in React

要检查一个变量是否为nullorundefined在 React 中，使用||(or) 运算符来检查是否满足两个条件中的任何一个。当与两个布尔值一起使用时，如果任一条件的计算结果为，则||运算符返回。truetrue

应用程序.js


import {useEffect, useState} from 'react';

export default function App() {
  const [message, setMessage] = useState(undefined);

  useEffect(() => {
    // 👇️ Check if NOT undefined or null
    if (message !== undefined && message !== null) {
      console.log('✅ variable is NOT undefined or null');
    }

    // 👇️ Check if undefined or null
    if (message === undefined || message === null) {
      console.log('✅ variable is undefined or null');
    } else {
      console.log('⛔️ variable is NOT undefined or null');
    }
  }, [message]);

  return (
    <div>
      <button onClick={() => setMessage('Hello world')}>Set message</button>

      <h2>{message}</h2>
    </div>
  );
}

检查是否未定义或为空

我们的第一if条语句检查message状态变量是否不等于
undefined或null。

我们使用逻辑
&& （和）
运算符来指定必须满足两个条件if才能运行该块。

我们的第二个if语句检查message变量是否是undefined
或null。

如果满足其中一个条件，则if块运行，否则
else块运行。

我们使用useEffect
挂钩来跟踪对message状态变量的更改，但是您可以在代码中的任何位置执行检查。

我们在示例中使用了
严格的相等 ===
运算符，但是有一种更简洁的方法来检查变量是否等于nullor undefined，即使用
松散的相等 ==。

应用程序.js


import {useEffect, useState} from 'react';

export default function App() {
  const [message, setMessage] = useState(undefined);

  useEffect(() => {
    // 👇️ Check if NOT undefined or null
    // (using loose not equals)
    if (message != undefined) {
      console.log('✅ variable is NOT undefined or null');
    }

    // 👇️ Check if undefined or null
    // (using loose equals)
    if (message == undefined) {
      console.log('✅ variable is undefined or null');
    } else {
      console.log('⛔️ variable is NOT undefined or null');
    }
  }, [message]);

  return (
    <div>
      <button onClick={() => setMessage('Hello world')}>Set message</button>

      <h2>{message}</h2>
    </div>
  );
}

我们在第一个示例中使用了松散的不等式运算符 (!=)。

它检查null和undefined因为当比较时使用松散相等null等于undefined。

应用程序.js


// 👇️ true
console.log(null == undefined);

第二个示例使用松散相等来检查message状态变量是否等于null或undefined。

这比使用严格相等运算符更隐含一些，并且可能会让阅读您的代码的某些开发人员感到困惑。

通常最好是明确和直接，而不是隐含和编写不太直观的代码。

您还可以检查变量是否存储真值。

真值是所有非假值。

JavaScript 中的假值是：undefined, null, false, 0, ""
（空字符串），NaN（不是数字）。

应用程序.js


import {useEffect, useState} from 'react';

export default function App() {
  const [message, setMessage] = useState(undefined);

  useEffect(() => {
    if (message) {
      console.log('✅ variable is truthy');
    }

    if (!message) {
      console.log('⛔️ variable is falsy');
    }
  }, [message]);

  return (
    <div>
      <button onClick={() => setMessage('Hello world')}>Set message</button>

      <h2>{message}</h2>
    </div>
  );
}

第一个条件检查message变量是否存储真值。

该变量可以存储除要满足的条件的 7 个伪值之外的任何值。

第二条if语句检查变量是否存储 7 个虚假值之一 – undefined, null, false, 0, ""（空字符串），NaN（不是数字）。

–