Javascript useEffect的用法将空白页删除

当我加上这个名字的时候

useffect（（）=>{
const fetchData=async（）=>{
const result=等待取数（'http://localhost.com/ping');
console.log（结果）
};
fetchData（）；
}, []);

对于我的组件，页面正确呈现，然后立即清空。我不确定我做错了什么，因为事实上，我的想法是一样的

完整组件：

import React from 'react';
import { useEffect } from 'react';
const Test = () => {

  useEffect(() => {
    const fetchData = async () => {
      const result = await fetch('http://localhost.com/ping');
      console.log(result)
    };
    fetchData();
  }, []);

  return (
    <>
      <h1>Test</h1>
    </>
  );
};

export default Test;

从“React”导入React；
从“react”导入{useffect}；
常数测试=（）=>{
useffect（（）=>{
const fetchData=async（）=>{
const result=等待取数（'http://localhost.com/ping');
console.log（结果）
};
fetchData（）；
}, []);
返回(
试验
);
};
导出默认测试；

应用程序

从'react hot loader/root'导入{hot}；
从“React”导入React；
从“./components/Navigation/Navigation.jsx”导入导航；
常量应用=（）=>{
返回(
东西
);
};
导出默认热（App）；

航行

/*eslint禁用反应/显示名称*/
从“react Router dom”导入{BrowserRouter as Router，Route，Link，Switch}；
从“React”导入React；
从“./主页”导入主页；
从“./Login”导入登录名；
从“./Logout”导入注销；
从“/Faq”导入常见问题；
从“/Dashboard”导入仪表板；
从“./Test”导入测试；
常量导航=（）=>{
const isLoggedIn=false；
返回(


家


{伊斯洛格丁(
注销
) : (
登录
)}


仪表板


常见问题


试验


);
};
导出默认导航；

---

我必须在这里写一些东西，因为堆栈溢出决定不允许我发布人们要求的代码…

您可以将fetch调用包装在try/catch块中以顺利运行代码

---

并使用一个react导入，而不是两个单独的导入

import React, {useEffect} from 'react';

const Test = () => {

  useEffect(() => {
    const fetchData = async () => {
      try{
        const result = await fetch('http://localhost/ping');
        console.log(result)
      } catch(error) {
          console.log(error.message);
      }

    };
    fetchData();
  }, []);

  return (
    <>
      <h1>Test</h1>
    </>
  );
};

export default Test;

import React，{useffect}来自“React”；
常数测试=（）=>{
useffect（（）=>{
const fetchData=async（）=>{
试一试{
const result=等待取数（'http://localhost/ping');
console.log（结果）
}捕获（错误）{
console.log（错误消息）；
}
};
fetchData（）；
}, []);
返回(
试验
);
};
导出默认测试；

尝试使用

   useEffect(() => {
    const fetchData = async () => {
      try {
          const result = await fetch('http://localhost.com/ping');
          console.log(result)
      } catch (e){
        console.log(e)
      }
    };
    fetchData();
  });

而不是

  useEffect(() => {
    const fetchData = async () => {
      const result = await fetch('http://localhost.com/ping');
      console.log(result)
    };
    fetchData();
  }, []);

---

经过一番探索，我终于得到了一条错误消息：

“Test.jsx:26未捕获引用错误：未定义regeneratorRuntime”

---

要修复此问题，请安装regenerator运行库并全局要求它。如果您不确定如何执行此操作，请阅读再生器运行时指南。

您是否检查了控制台？可能fetch正在抛出未处理的异常并崩溃！添加

…获取（'http://localhost.com/ping“）.catch（console.error）

@TobiasLins控制台是干净的我想url是

http://localhost/ping

not

.com

@Sohail是的，在那里输入了一个错别字^^仍然空白…没有发现任何错误：（即使在useEffect内部没有什么可做的，也只是一个控制台.log（）它会中断…并使用一个react导入，而不是两个单独的导入。没有看到autoimport决定在多行中导入react，这没有什么区别。您不需要这些[]，因为useEffect（）中的第二个参数没有什么区别，仍然加载1帧，然后是空白页：（你的app.js可能有问题。在空白项目上运行良好，刚刚测试过。）

  useEffect(() => {
    const fetchData = async () => {
      const result = await fetch('http://localhost.com/ping');
      console.log(result)
    };
    fetchData();
  }, []);