onSubmit пропускает дату рендеринга (но только при первой отправке)

Question

У меня есть форма для отправки входных данных с пользовательской функцией даты, затем я отображаю сообщения на основе своей схемы сообщений. Это не передает дату государству с самого первого представления. Но это касается любого другого представления. Почему пропускает 1-ю отправку ?

1) Считал, что возникла проблема с форматированием, поскольку с 1 января 1970 года у меня была функция, возвращающая только число мс, поэтому я создал новую функцию даты. 2) Затем я попытался поместить функцию date в форму, непосредственно перед return (), но это не сработало вообще. 3) Я также попытался поместить свою функцию func date в мой компонент Logs.js - схему для каждого поста, и она работала, но она меняла ВСЕ даты в каждом созданном посте, поэтому дата везде была одинаковой.

**//============ App.js - main file: ============**
import React, { Component } from "react";
import "./App.css";
import Logs from "./Logs";
import Form from "./Form";

class App extends Component {
  state = {
logs: [
  {
    id: 1,
    content: "Hello there",
    author: "John",
    image:
      "https://cdn-images-1.medium.com/max/1600/1*DsD06sTC-X5AVj_m9nElRg.jpeg"
  }
]
  };

  deleteLogHandle = id => {
const logsArrWithoutTheDeletedOne = this.state.logs.filter(item => {
  return item.id !== id;
});
this.setState({ logs: logsArrWithoutTheDeletedOne });
  };

  addItem = item => {
item.id = new Date().valueOf();
let newLogs = [...this.state.logs, item];
this.setState({ logs: newLogs });
  };

  render() {
    return (
  <div>
    <h1>Logs App</h1>
    <Form addItem={this.addItem} />
    <Logs
      allThemLogsInThisObject={this.state.logs}
      deletingFunctionProperty={this.deleteLogHandle}
    />
  </div>
    );
  }
}
    export default App;

**//============ Logs.js - schema for all the posts: ============**

import React from "react";

let Logs = ({ allThemLogsInThisObject, deletingFunctionProperty }) => {
  const logsList = allThemLogsInThisObject.length ? (

allThemLogsInThisObject.map(item => {
  return (
    <div className="log" key={item.id}>
      <div>
        <div>{item.author}</div>

        <button
          onClick={() => {
            deletingFunctionProperty(item.id);
          }}
        >
          click to delete
        </button>
      </div>

      <div>{item.date}</div>
      <div>
        <img src={item.image} alt="img" />
      </div>
      <div>{item.content}</div>

      <button>Like</button>
      <button>Share</button>
      <button>Comment</button>
      <hr />
    </div>
  );
})
  ) : (
<p>{`Wow, so empty here, why don't you add some post here?`}</p>
  );
  return <div>{logsList}</div>;
    };

 export default Logs;

**//============ Form.js - form with my date func: ============**

import React from "react";

 class Form extends React.Component {
  state = {
id: "",
date: "",
content: "",
author: "",
image: ""
  };

  handleChange = event => {
const { name, value } = event.target;
this.setState({
  [name]: value
});
  };

  handleSubmit = event => {
event.preventDefault();
let myTime = function() {
  let today = new Date();
  let hh = today.getHours();
  let mn = today.getMinutes();
  let dd = today.getDate();
  let mm = today.getMonth() + 1; //January is 0
  let yyyy = today.getFullYear();
  if (dd < 10) {
    dd = "0" + dd;
  }
  if (mm < 10) {
    mm = "0" + mm;
  }
  return hh + ":" + mn + " - " + mm + "/" + dd + "/" + yyyy;
};

let currentDate = myTime();
this.setState({ date: currentDate });
this.props.addItem(this.state);
console.log(this.state);
this.setState({ content: "", author: "", image: "" });
  };

  render() {
return (
  <div>
    <form onSubmit={this.handleSubmit}>
      <label>
            Add author:
        <input
          type="text"
          name="author"
          placeholder="Author"
          onChange={this.handleChange}
          value={this.state.author} 
        />
      </label>
      <br />
      <label>
                Add image url:
        <input
          type="text"
          name="image"
          placeholder="Image URL"
          onChange={this.handleChange}
          value={this.state.image} 
        />
      </label>
      <br />
      <label>
            Add text:
        <input
          type="text"
          name="content"
          placeholder="Your message goes here"
          onChange={this.handleChange} 
          value={this.state.content} 
        />
      </label>
      <br />

      <button>Submit</button>
    </form>
    <hr />
  </div>
);
  }
}

export default Form;

Ожидаемое: {id: 1547899503924, date: "13:4 - 01/19/2019", content: "463554", author: "John", image: "https://cdn.pixabay.com/photo/2015/07/10/17/24/night-839807_1280.jpg"} при каждой отправке

Фактические результаты: 1-я отправка:

{id: 1547899503924, date: "", content: "463554", author: "Alessi", image: "https://cdn.pixabay.com/photo/2015/07/10/17/24/night-839807_1280.jpg"}

Все остальные отправляют:

{id: 1547899503924, date: "13:4 - 01/19/2019", content: "463554", author: "Alessi", image: "https://cdn.pixabay.com/photo/2015/07/10/17/24/night-839807_1280.jpg"}

Answer 1

решено путем перемещения функции даты и удаления двойного setState в компоненте Form.js:

handleChange = event => {
    //19 takes in some event (onChange etc)
    event.preventDefault();
    const { name, value } = event.target;
    let myTime = function() {
      let today = new Date();
      let hh = today.getHours();
      let mn = today.getMinutes();
      let dd = today.getDate();
      let mm = today.getMonth() + 1; //January is 0!
      let yyyy = today.getFullYear();
      if (dd < 10) {
        dd = "0" + dd;
      }
      if (mm < 10) {
        mm = "0" + mm;
      }
      if (mn < 10) {
        mn = "0" + mn;
      }
      return hh + ":" + mn + " - " + dd + "/" + mm + "/" + yyyy;
    };

    let currentDate = myTime();
    this.setState({
      [name]: value,
      date: currentDate
    });
  };

handleSubmit = event => {
    event.preventDefault();
    this.props.addItem(this.state);
    this.setState({ content: "", author: "", image: "" });
  };