React中自定义获取年份函数无法渲染显示的问题求助

嗨，我来帮你搞定这个问题～你的代码里有两个关键问题导致页面无法显示年份，咱们一步步来修正：

1. Date构造函数调用错误 #

你写的new Date.getFullYear()是错误的写法！Date是一个构造函数，必须先通过new Date()创建一个Date实例，才能调用它的实例方法getFullYear()。直接写new Date.getFullYear()相当于试图调用Date.getFullYear这个不存在的静态方法，会抛出错误。

2. JSX中函数未被调用 #

在React的JSX里，{this.currYear}只是把函数本身作为值传递，并没有执行它，所以不会返回任何内容。你需要加上括号()来调用这个函数，让它返回计算后的年份值。

修正后的完整代码示例（类组件） #

class YearComponent extends React.Component {
  // 修正后的年份获取函数
  currYear = () => {
    const year = new Date().getFullYear(); // 先实例化Date，再调用方法
    return year;
  };

  render() {
    return (
      <div>
        {/* 调用函数，而不是引用函数 */}
        当前年份：{this.currYear()}
      </div>
    );
  }
}

如果是函数组件，写法更简洁： #

function YearComponent() {
  const currYear = () => new Date().getFullYear();

  return (
    <div>
      当前年份：{currYear()}
    </div>
  );
}

额外小提示 #

如果你只是单纯获取当前年份，其实可以不用单独封装函数，直接在JSX里写{new Date().getFullYear()}就足够了，就像你之前测试的那样。但如果这个逻辑需要复用，封装成函数是很好的做法～

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