React Hooks 中 API 路径的错误边界-解网

问：

我正在尝试学习错误边界，因此我更改了 url 路径并包含错误边界包并在外面添加了该组件，但我仍然没有看到错误消息你能告诉我如何解决它吗？在下面提供代码和小提琴。我用谷歌搜索了一下，但仍然没有运气。

索引 .js

import React, { StrictMode } from 'react';
import { createRoot } from 'react-dom/client';
import { ErrorBoundary } from 'react-error-boundary';

import App from './App';

const rootElement = document.getElementById('root');
const root = createRoot(rootElement);

root.render(
  <StrictMode>
    <ErrorBoundary fallback={<div>Something went wrong</div>}>
      <App />
    </ErrorBoundary>
  </StrictMode>
);

使用提取

import { useState, useEffect } from 'react';

const useFetch = (url) => {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then((data) => setData(data));
  }, [url]);

  return [data];
};

export default useFetch;

应用程序

import React from 'react';
import { useState, useEffect } from 'react';
import './style.css';
import useFetch from './useFetch';

export default function App() {
  const [data] = useFetch('https://jsonplaceholder.typicode.com/todos/ddd');

  return (
    <div>
      {data &&
        data.map((item) => {
          return <p key={item.id}> {item.title}</p>;
        })}

      <h1>Hello StackBlitz!</h1>
      <p>Start editing to see some magic happen :)</p>
    </div>
  );
}

https://stackblitz.com/edit/react-6tdyn9?file=src%2Findex.js,src%2FuseFetch.js,src%2FApp.js

JavaScript ReactJS 错误处理