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

Question

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，它对我不起作用..

Answer 1

如果你想这样做，请使用 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>
  );
}