非父子页面传递函数报错：confirmedAddress is not a function求助

出现confirmedAddress is not a function错误的核心原因通常是组件调用方式错误或模块导入导出不规范，以下是具体修复步骤：

情况1：secondPage是React组件 #

如果secondPage是React组件，不能直接像普通函数那样调用，必须用JSX语法渲染并通过props传递函数：

修正secondPage.jsx（确保正确导出并接收props） #

// secondPage.jsx
export const SecondPage = (props) => {
  // 调用传入的函数
  props.confirmedAddress();
  return <div>第二页内容</div>;
};

修正firstPage.jsx（用JSX渲染组件并传递函数） #

// firstPage.jsx
import { SecondPage } from './secondPage';

const confirmedAddress = () => {
  console.log("first page");
};

const FirstPage = () => {
  return (
    <div>
      {/* 通过props传递函数 */}
      <SecondPage confirmedAddress={confirmedAddress} />
    </div>
  );
};

export default FirstPage;

情况2：secondPage是普通工具函数 #

如果secondPage只是普通工具函数，需确保模块导入导出正确，同时可增加类型校验避免错误：

修正secondPage.jsx（命名导出函数） #

// secondPage.jsx
export const secondPage = (confirmedAddress) => {
  // 先校验传入值是否为函数
  if (typeof confirmedAddress === 'function') {
    confirmedAddress();
  } else {
    console.error('传入的参数不是有效的函数');
  }
};

修正firstPage.jsx（正确导入并调用） #

// firstPage.jsx
import { secondPage } from './secondPage';

const confirmedAddress = () => {
  console.log("first page");
};

// 直接调用工具函数
secondPage(confirmedAddress);

额外注意事项 #

• 变量名尽量遵循大驼峰命名（React组件）和小驼峰命名（普通函数）的规范，避免混淆。
• 检查是否有同名变量覆盖了confirmedAddress，导致传递的不是预期的函数。

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