Question

大家好我试图用react.js显示日期，但由于某种原因它没有显示任何东西，我是一个乞丐所以我很抱歉，如果我问一个愚蠢的问题，但我不知道为什么它不工作。有人可以帮帮我吗？非常感谢！！

class App extends React.Component {
  state = {
    date: ""
  };

  getDate() {
    var date = { currentTime: new Date().toLocaleString() };

    this.setState({
      date: date
    });
  }

  render() {
    return (
      <div class="date">
        <p> ddd {this.state.date}</p>
      </div>
    );
  }
}

export default App;

Answer 1

您尝试获取日期状态而不先显式设置。 ~~考虑到这一点，请在ComponentDidMount中调用getDate()方法：~~

class App extends App.Component {
  ...
  componentDidMount() {
    this.getDate();
  }
  ...
}

从那里你应该能够在你的渲染通话中检索它：

render() {
  return (
    <div class="date">
      <p> ddd {this.state.date}</p>
    </div>
  );
}

<强>更新

constructor()可能更适合这种情况，因为没有调用外部请求来检索所述数据：

constructor(props) {
  super(props);
  this.state = {
    date: new Date().toLocaleString()
  };
}

Answer 2

尝试做：

var date = new Date();
this.setState({ date });

而不是

var date = {currentTime: (new Date()).toLocaleString()}
this.setState({date:date });

并检查当前日期是否显示。

然后查看如何使用某种格式更改日期字段。

希望这可以帮助你

Answer 3

我建议查找component lifecycle methods。

状态尚未设置，因为您从未调用过getDate（），所以您只是获得一个空字符串。

android/build.gradle

Answer 4

这是一种简单的方法：

class App extends React.Component {
  state = {date: new Date()}

  render() {
    return (
      <div class="date">
        <p> ddd {this.state.date.toLocaleDateString()}</p>
      </div>
    );
  }
}

export default App;

干杯！

Answer 5

您可以通过使用 ${} 来使用 JavaScript 代码，如下所示：

<span className="xyz">
      {`${new Date().toLocaleString()}`}
</span>

请注意，您需要在 ${} 周围使用 Grave Accent 字符（即`）。

或者如果你想将日期时间字符串转换为本地值，你可以按照这个解决方案：

<span className="xyz">
      {`${formData.updatedAt ? new Date(formData.updatedAt).toLocaleString() : ""}`}
</span>

如何使用state在react.js中显示日期

5 个答案: