javascript - 在 React 上，如何在功能/无状态组件上的组件挂载上调用函数？

Question

我有这个功能/无状态组件，其中有一个函数 filterByCardinalPoint ，我需要在安装组件时调用该函数。有没有办法在不将组件编写为类的情况下做到这一点？

const PassengersCircle = ({ navigationStore, passengersData }) => {
  const filterByCardinalPoint = () => {
    const passengersByCardinalPoint = filter('value');
    ...
  };

  return (...)
};

Answer 1

您可以使用useEffect挂载组件后运行函数的钩子(Hook)。通过给它一个空数组作为第二个参数，它只会在初始渲染后运行。

const PassengersCircle = ({ navigationStore, passengersData }) => {
  const filterByCardinalPoint = () => {
    const passengersByCardinalPoint = filter('value');
    // ...
  };

  useEffect(() => {
    filterByCardinalPoint();
  }, []);

  return <>{/* ... */}</>;
};