错误消息被记录为 React 元素 $$typeof: Symbol(react.element)

Question

我只是尝试使用

throw new Error("message")

显示自定义错误消息。我在控制台中得到的只是这个

{$$typeof: Symbol(react.element), type: 'p', key: null, ref: null, props: {…}, …}

这是我正在使用的代码

注意 -

query

设置为发送错误的输入以获得错误

export default function App() {

  const [movies, setMovies] = useState([]);
  const [watched, setWatched] = useState([]);
  const [isLoading, setIsLoading] = useState(false);
  const [error, setError] = useState("");
  const query = "hgjhgh";

  useEffect(function () {
    async function fetchMovies() {
      try {
        setIsLoading(true);
        const res = await fetch(
          http://www.omdbapi.com/?i=tt3896198&apikey=${KEY}&s=${query}
        );
        if (!res.ok) {
          throw new Error("Something went wrong with fetching movies");
        }
        const data = await res.json();
        if (data.Response === "False") {
          throw new Error("Movie not found");
        }
        setMovies(data.Search);
      } catch (err) {
        console.log(err);
        setError(err.message);
      } finally {
        setIsLoading(false);
      }
    }

    fetchMovies();
  }, []);

  return (
    <>
      <Navbar>
        <Search />
        <NumResults length={movies.length} />
      </Navbar>
      <Main>
        <Box>
          {isLoading && <Loader />}
          {!isLoading && !error && <MovieList movies={movies} />}
          {error && <Error error={error} />}
        </Box>
        <Box>
          <WatchedMovieSummery watched={watched} />
          <WatchedMovieList watched={watched} />
        </Box>
        {/* <WatchedBox /> */}
      </Main>
    </>
  );
}

function Loader() {
  return <p className="loader">Loading...</p>;
}

function Error({ error }) {
  return <p className="error">{error}</p>;
}

...remaining code

我找到了一种解决方法，就是简单地使用

throw "message"

而不是创建错误对象。但我需要知道为什么我的应用程序会这样反应。

它是一个简单的应用程序，用于从 omdb 渲染电影。我刚刚开始创建这个。

Answer 1

问题的答案是：

模块级 Error 函数隐藏或覆盖全局范围内的通用 Error 构造函数。

详细解答：

投掷可能是这里的明星或恶棍。

MDN 文档关于 throw 的摘要可能如下所述。

throw 语句抛出给定的表达式。

众所周知，表达式意味着，它在被求值时会产生一个值。

因此，下面所有的 throw 语句都是有效的。 另请注意每种情况下生成的 console.log。

try {
   throw 1;
} catch (err) {
   console.log(err); // will print 1
}

try {
   throw "one";
} catch (err) {
   console.log(err); // will print "one"
}

try {
   throw (() => 1)(); // immediate invocation
} catch (err) {
   console.log(err); // will print 1
}

火上浇油

上面的讨论可能帮助我们理解 trow 语句如何与不同类型的表达式一起使用。现在，火上浇油是无意中隐藏了通用错误构造函数。请通过代码查看下面的插图。

以下代码做了两件事。它使用通用 Error 构造函数创建一个 Error 对象，然后抛出该错误对象。 请注意它在控制台中生成的输出，它基本上是堆栈跟踪。

try {
   throw Error();
} catch (err) {
   console.log(err);
}
});

Error
    at App.js:6:1
    at commitHookEffectListMount (...
    ...
    at commitRoot (react-dom.development.js:26721:1)

但是，以下代码使用自定义错误消息函数创建自定义错误消息。 这里最值得注意的一点可能是命名冲突。块级 Error 函数隐藏了通用 Error 构造函数。对于 JavaScript 中的作用域规则来说确实如此。块级变量将隐藏或覆盖所有其他级别，包括全局范围。

try {
  const Error = () => 'Custom error message';
  throw Error();
} catch (err) {
  console.log(err); // Custom error message
}