React Native超市清单页面切换报错：找不到onSelectedEnlarge函数

出现这个错误，大概率是函数的props传递、组件内调用或者函数定义环节出了问题，按以下步骤逐一排查：

• 确认父组件（App.js）已正确传递props
  在App.js渲染SupermarketList时，必须把定义好的onSelectedEnlarge函数作为props传过去，示例代码：

  // App.js 类组件写法
  class App extends Component {
    // 先定义切换视图的函数
    onSelectedEnlarge = () => {
      // 这里写你的视图切换逻辑，比如修改状态控制显示放大视图
      this.setState({ showEnlargeView: !this.state.showEnlargeView });
    };
  
    render() {
      return (
        // 传递props给SupermarketList
        <SupermarketList onSelectedEnlarge={this.onSelectedEnlarge} />
      );
    }
  }
  
  // App.js 函数组件写法
  function App() {
    const [showEnlargeView, setShowEnlargeView] = useState(false);
    const onSelectedEnlarge = () => {
      setShowEnlargeView(!showEnlargeView);
    };
  
    return (
      <SupermarketList onSelectedEnlarge={onSelectedEnlarge} />
    );
  }
  

  如果没做这一步，SupermarketList内部根本拿不到这个函数。

• 确认SupermarketList组件内正确调用props中的函数
  组件内的按钮点击事件必须指向props里的onSelectedEnlarge，不能直接写函数名：

  // SupermarketList 类组件写法
  class SupermarketList extends Component {
    render() {
      return (
        <Button 
          title="Ampliar" 
          onPress={() => this.props.onSelectedEnlarge()} 
        />
      );
    }
  }
  
  // SupermarketList 函数组件写法
  const SupermarketList = ({ onSelectedEnlarge }) => {
    return (
      <Button 
        title="Ampliar" 
        onPress={onSelectedEnlarge} 
      />
    );
  };
  

  注意函数组件要先解构props，或者通过props.onSelectedEnlarge调用。

• 检查函数定义和拼写一致性
  确保onSelectedEnlarge这个函数名在定义、传递props、组件内调用三个环节的拼写、大小写完全一致，比如不要把Enlarge写成Enlage这类拼写错误。

• 确认父组件中函数已正确定义
  检查App.js里的onSelectedEnlarge确实是一个可执行的函数，不能是未定义的变量或者非函数类型的值。

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