时间戳

首页 > 解决方案 > 如何在功能组件上接收 express 发送的数据？

javascript - 如何在功能组件上接收 express 发送的数据？

问题描述

function Header(props) {  
  const [ serverData, setServerData ] = useState({});

  fetch('http://localhost:4001/api')
      .then(res => res.json())
      .then((data) => {
        setServerData(data);
        console.log(data);
      });

  return (
      <div>{serverData}</div>
  );
}

我正在尝试制作这个功能性的 React 组件来从 express api 获取数据。

我的代码编辑器一直关闭，我认为接收数据部分在循环中。

我怎样才能使这个功能组件只获取一次数据，而不使用 componentdidmount 或类类型组件。

我试过useCallback，它对我不起作用..

标签： javascriptnode.jsreactjsexpress

解决方案

如果你想这样做，请使用 useEffect 钩子。If 将发生一次，除非依赖项发生变化（此处未列出依赖项）。

function Header(props) {  
  const [ serverData, setServerData ] = useState({});

  useEffect(() => {
    fetch('http://localhost:4001/api')
      .then(res => res.json())
      .then((data) => {
        setServerData(data);
        console.log(data);
      });
  }, []);

  return (
      <div>{serverData}</div>
  );
}

推荐阅读