时间戳

首页 > 解决方案 > 在 React 上，如何在功能/无状态组件上调用组件挂载的函数？

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

问题描述

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

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

  return (...)
};

标签： javascriptreactjsecmascript-6

解决方案

useEffect当组件被挂载时，你可以使用钩子来运行一个函数。通过给它一个空数组作为第二个参数，它只会在初始渲染之后运行。

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

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

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

推荐阅读