React中如何将函数返回值作为Link组件的state参数传递？

你遇到的问题核心很清晰：你传递给state的是number函数本身，而不是调用这个函数后得到的返回值。在JavaScript里，直接写函数名number引用的是整个函数对象，只有加上括号number()才会执行函数并获取它的返回结果。

错误原因拆解 #

看你的代码片段：

function number() { return 0; } 
<Link to={{pathname: '/path', state: {number: number}}}>Go</Link>

这里state中的number: number是把函数本身赋值给了number属性，所以最终传递的是函数的定义文本，而非它返回的0。

快速修复方案 #

只需要把函数调用起来，改成number()即可：

function number() { return 0; } 
<Link to={{pathname: '/path', state: {number: number()}}}>Go</Link>

这样state.number就会是函数返回的0，而不是函数对象本身。

更优实现方式 #

根据你的实际场景，还有几种更简洁的写法：

• 如果只是返回固定值，完全没必要用函数，直接用常量更直观：

  const num = 0;
  <Link to={{pathname: '/path', state: {number: num}}}>Go</Link>
  

• 如果函数里有依赖组件状态/ props的复杂计算：
  • 直接调用带参数的函数即可（比如number(props.id)）
  • 若计算开销较大，用useMemo缓存结果，避免不必要的重复计算：

    import { useMemo } from 'react';
    
    function YourComponent(props) {
      const calculatedNumber = useMemo(() => {
        // 这里写复杂计算逻辑，比如基于props的动态计算
        return props.count * 2;
      }, [props.count]); // 依赖项变化时才重新计算
    
      return (
        <Link to={{pathname: '/path', state: {number: calculatedNumber}}}>Go</Link>
      );
    }
    

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