如何解决React组件调用外部JS文件函数返回值渲染为undefined的问题

排查步骤及解决方案 #

• 首先确认模块导入路径正确性
  你foo.js中第一行导入了./script/stuff/myfantasticfile.js，如果该路径与实际文件位置不匹配，会导致foo.js模块加载失败，连带myFantasticFunction导出失效。可先注释掉这行未使用的random导入测试，排除上游依赖加载失败的问题。
• 检查导入导出语法匹配
  当前你使用的是命名导出export const myFantasticFunction，对应命名导入import {myFantasticFunction} from "./foo.js"语法是正确的。确认不存在以下问题：
  • 函数名大小写拼写错误，JS大小写敏感，大小写不匹配会导致导入的函数为undefined
  • 误将命名导出写为默认导出export default myFantasticFunction，默认导出不需要加花括号导入，混用会导致导入值为undefined
• 补全代码语法错误
  你贴出的App.jsx代码缺少函数闭合的}，语法错误会导致组件编译异常，运行结果不符合预期，补全后如下：

  import react from "react";
  import Stuff from "./stuff.jsx"
  import {myFantasticFunction} from "./foo.js"
  
  function App(){
    const myVariable = myFantasticFunction();
    return(
      <div>
        <Stuff/>
        <p>{myVariable}</p>
      </div>
    )
  }
  

• 定位问题环节
  在App组件内加入调试代码：

  console.log('函数本身：', myFantasticFunction)
  console.log('函数返回值：', myFantasticFunction())
  

  如果打印的函数本身为undefined，问题出在导入环节，重点排查路径和拼写；如果函数正常但返回值为undefined，再检查函数内部逻辑是否存在隐式返回问题。

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