Question

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

2018-05-28

136462

javascript reactjs

我正在尝试使用 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()
  };
}

Answer 2

这是一个简单的方法：

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 3

尝试执行：

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

而不是

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

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

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

希望这对您有所帮助