检查 React 中变量是否未定义

作者

检查 React 中的变量是否未定义

Check if Variable is Undefined in React

要检查 React 中的 undefined，使用比较来检查值是否等于或不等于undefined，例如if (myValue === undefined) {}or
if (myValue !== undefined) {}。如果满足条件，if块将运行。

应用程序.js
import {useEffect, useState} from 'react';

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

  useEffect(() => {
    // ✅ Check if NOT equal to undefined
    if (message !== undefined) {
      console.log('variable is NOT undefined');
    }

    // ✅ Check if undefined
    if (message === undefined) {
      console.log('variable is undefined');
    }

    // ✅ Check if value is NOT equal to undefined and null
    if (message !== undefined && message !== null) {
      console.log('variable is NOT undefined or null');
    }

    // ✅ Check if value is equal to undefined or null
    if (message === undefined || message === null) {
      console.log('variable is undefined or null');
    }
  }, [message]);

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

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

如果我们的第一if条语句，我们检查message变量是否不等于
undefined。

第二个示例检查变量是否等于undefined。

第三条if语句检查变量是否不等于undefined和不等于null。

第四个示例检查变量是否等于undefined或等于
null。

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

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

真值是所有非假值。

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（不是数字）。

–

发表评论