React报错：refresh不是函数，如何在组件中正确调用该方法？

首先，你遇到的报错'x' refresh 不是一个函数，原因很明确：函数组件的第一个参数是props对象，不是单独的refresh函数。你当前写的function UpdateLokalListe(refresh)里，refresh其实是整个props对象，调用它自然会触发报错。

方案1：修正函数组件的参数传递 #

只需要调整函数组件的参数处理方式，通过解构props或者直接访问props属性拿到refresh方法，同时记得给useCallback加上依赖数组（避免不必要的重渲染和React警告）：

function UpdateLokalListe({ refresh }) {
  useFocusEffect(
    React.useCallback(() => {
      refresh();
    }, [refresh]) // 依赖数组：当refresh方法变化时重新创建回调
  );
  return null;
}

如果不习惯解构，也可以直接通过props访问：

function UpdateLokalListe(props) {
  useFocusEffect(
    React.useCallback(() => {
      props.refresh();
    }, [props.refresh])
  );
  return null;
}

修改后，refresh就能正确获取类组件传递的方法，调用时就不会再报错了。

方案2：将聚焦逻辑直接整合到类组件中 #

既然你的主组件是类组件，完全可以省去额外的函数组件，直接利用React Navigation的导航事件监听，实现屏幕聚焦时调用_refresh的逻辑，步骤如下：

1. 在componentDidMount中添加focus事件监听
2. 在componentWillUnmount中移除监听（防止内存泄漏）

修改后的类组件代码：

export default class LokaleBearbeitenScreen extends Component {
  state = {
    lokale: [],
    isLoading: true,
  };

  _retrieveData = async () => { ... };

  _refresh = () => {
    alert('refresh');
    this.setState({ isLoading: true });
    this._retrieveData();
  };

  componentDidMount() {
    Firebase.init();
    this._retrieveData();
    // 添加屏幕聚焦事件监听
    this.focusListener = this.props.navigation.addListener('focus', () => {
      this._refresh();
    });
  }

  componentWillUnmount() {
    // 移除监听，避免内存泄漏
    this.focusListener();
  }

  render() {
    ...
    return (
      <>
        {/* 不再需要渲染UpdateLokalListe组件 */}
        ...
      </>
    );
  }
}

这种方式更简洁，逻辑全部集中在类组件内部，也符合类组件的使用习惯，不需要额外拆分组件。

内容的提问来源于stack exchange，提问作者disabled