React函数式组件中如何使用Getter？类组件可用但函数式报错

你遇到的问题很常见——类组件的get语法是类的专属特性，函数式组件作为普通JS函数，并不支持这个语法，而且函数式组件里也没有this上下文，所以直接照搬类组件的写法肯定会报错。下面给你两种实用的解决方案：

方案1：使用普通函数封装逻辑 #

既然不能用类的getter，我们可以直接写一个普通函数来封装计算逻辑，在需要的时候调用它。注意要把类里的this.props换成组件的props参数，this.state.activeGroup换成用useState声明的状态变量：

import { useState } from 'react';

const YourComponent = (props) => {
  // 用useState替代类组件的state
  const [activeGroup, setActiveGroup] = useState('初始值');

  // 封装计算逻辑的普通函数
  const getLookupsOfSelectedGroup = () => {
    const lookUps = props.mainLookups.filter(item => item.extras.parent === activeGroup);
    if (lookUps[0] && lookUps[0].responseStatus === 200) {
      return lookUps[0].response.lookup;
    }
    return [];
  };

  // 在组件中使用时直接调用函数
  const currentLookups = getLookupsOfSelectedGroup();

  return (
    <div>
      {/* 你的组件内容 */}
    </div>
  );
};

方案2：用useMemo实现类Getter式的计算属性 #

如果你希望这个计算值能像类组件的getter一样，在依赖的props或state变化时自动更新，并且想避免每次渲染都重复计算（优化性能），可以用React的useMemo Hook：

import { useState, useMemo } from 'react';

const YourComponent = (props) => {
  const [activeGroup, setActiveGroup] = useState('初始值');

  // 用useMemo创建缓存的计算属性，依赖项变化时才重新计算
  const lookupsOfSelectedGroup = useMemo(() => {
    const lookUps = props.mainLookups.filter(item => item.extras.parent === activeGroup);
    if (lookUps[0] && lookUps[0].responseStatus === 200) {
      return lookUps[0].response.lookup;
    }
    return [];
  }, [props.mainLookups, activeGroup]); // 依赖项数组必须包含所有用到的props/state

  // 使用时直接访问变量，不用调用，和类组件的getter用法完全一致
  return (
    <div>
      {lookupsOfSelectedGroup.map(item => (
        <div key={item.id}>{item.name}</div>
      ))}
    </div>
  );
};

为什么原来的代码会报错？ #

• 函数式组件是普通JavaScript函数，不是类，所以不支持类的get关键字语法；
• 函数式组件没有this上下文，所以this.props和this.state都是无效的，必须直接使用组件的props参数和useState声明的状态变量。

内容的提问来源于stack exchange，提问作者kamran jan khalilz