如何使用状态在React.js中显示日期？

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

您正在尝试获取日期状态，而无需先明确设置日期。 考虑到这一点，请getDate()像ComponentDidMount这样调用该方法：

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()
  };
}