TypeError：Date.getFullYear 不是 ReactJs 上的函数

Posted 2023-03-16

【中文标题】TypeError：Date.getFullYear 不是 ReactJs 上的函数

【英文标题】：TypeError: Date.getFullYear is not a function on ReactJs

【发布时间】：2022-01-11 01:45:34

【问题描述】：

我正在尝试将动态列表添加到我的扩展列表中，并且在执行此操作时遇到此错误：

**TypeError: Date.getFullYear is not a function**

[TypeError: Date.getFullYear is not a function on ReactJs ][1]

但在静态列表中，它会向我显示我想要的格式，没有错误。

This is a static list

我正在尝试根据用户输入更新列表。

Expanse.js

  return (
    <div>
      <Wrapper>
        <DateAndTitle>
          <ExpanseTime>
            <ExpanseDates Date=date />
          </ExpanseTime>
          <Title>title</Title>
        </DateAndTitle>
        <Amount>amount$</Amount>
      </Wrapper>
    </div>
  );
;

ExpanseDate.js

  let month =Date.toLocaleString("en-US",  day: "2-digit" );
  let day = Date.toLocaleString("en-US",  month: "long" );
  let year = Date.getFullYear();


  return (
    <Wrapper>
     <ExpanseDays>day</ExpanseDays>
      <ExpanseMonth>month</ExpanseMonth>
      <ExpanseYear>year</ExpanseYear>

    </Wrapper>
  );
;

AddExpanse.js

This is User Input

是用户输入代码：

enter image description here

【问题讨论】：

顺便说一句，您的 month 和 day 变量因彼此的值而被错误命名。

【参考方案1】：

编辑：

您仍然没有在您的应用程序中提供可重现的示例或所有相关代码，但现在我认为您将 string 传递给 ExpanseDates 组件的 Date 属性而不是实际Date.

如果您使用date input 来获取日期值，则需要先将输入的value 解析为实际的javascript 日期对象，然后再将其传递给该组件：

function getDateFromInput (input) 
  const [y, m, d] = input.value.split('-').map(s => parseInt(s, 10));
  return new Date(y, m - 1, d);


function handleChange (ev) 
  const date = getDateFromInput(ev.target);
  // use the date: just logging it to console here
  console.log(date.toString());


document.querySelector('input[type="date"]').addEventListener('input', handleChange);

<input type="date" value="1999-12-31" />

---

您展示的示例不完整，无法用于重现您的错误。但是，这里有一个 sn-p，其中包含您问题中的相关部分，演示了如何从组件的 props 中解构一个值：

在您的代码中，属性的名称恰好是 Date，这与 JavaScript 中的内置 Date 类和组件范围内的 shadows it 名称相同。 这通常不是一个好习惯：隐藏内置插件不是一个好主意。

尝试在 ExpanseDates 组件中重命名该道具以避免与内置 Date 产生歧义。

<div id="root"></div><script src="https://unpkg.com/react@17.0.2/umd/react.development.js"></script><script src="https://unpkg.com/react-dom@17.0.2/umd/react-dom.development.js"></script><script src="https://unpkg.com/@babel/standalone@7.16.4/babel.min.js"></script>
<script type="text/babel" data-type="module" data-presets="react">

function Component (props) 
  const Date = props;
  let day = Date.toLocaleString("en-US",  day: "2-digit" );
  let month = Date.toLocaleString("en-US",  month: "long" );
  let year = Date.getFullYear();
  return <div>year month day</div>;


function Example () 
  const date = new Date();
  return <Component Date=date />;


ReactDOM.render(<Example />, document.getElementById('root'));

</script>

【讨论】：

是的，我做了你的建议，但我仍然得到 TypeError: Date.getFullYear is not a function 这是错误：imgur.com/a/2lyb5TN

@Oulili 看起来您还没有在组件的props 上重命名该属性。尝试将名称从 Date 更改为 date（小写 d）。

感谢您的回答，是的，我将其更改为小写，静态页面向我显示：imgur.com/a/8MKbEVl，这意味着它正在工作，但是当我点击提交按钮时它给了我：date.getFullyear() 不是如果你想要所有源代码，我在 twitter 上发短信的功能

如果没有minimal, reproducible example，我们将无法帮助您调试

好的，我会试试的

【参考方案2】：

试试这个：

const now = new Date();
let month = now.toLocaleString("en-US",  day: "2-digit" );
let day = now.toLocaleString("en-US",  month: "long" );
let year = now.getFullYear();

【讨论】：

这是它给我的：\imgur.com/a/AEniOk4