Компонент не обновляет значения

Question

Функция submitRecord добавляет в массив значения, введенные во входные данные. Затем реквизиты переносятся в компонент «EmployeePanel». Значение отображается в:

<PanelItem title="Zarobione pieniądze:" value={moneyEarned} />

Но значение изменяется не сразу, а после повторного ввода пути. Как сделать так, чтобы значение появилось в поле сразу после нажатия кнопки подтверждения?

submitRecord = (id, e) => {
    e.preventDefault();
    let employeesList = this.state.employeesList;
    employeesList = employeesList.map(person => {
      if (person.id === id) {
        person.timeRecords.push(this.state.record);
        person.hoursWorked += this.state.record.hours * 1;
        console.log(person);
      }
      return person;
    });
    this.setState({ employeesList });

<Route path="/employeePanel/:name" render={props => <EmployeePanel {...props} />} />

const EmployeePanel = props => {
  const {
    id,
    firstName,
    lastName,
    email,
    phone,
    rate,
    accountNumber,
    timeRecords,
    moneyEarned,
    hoursWorked,
  } = props.location.state;
  console.log(props);
  return (
    <div className="employeePanel">
      <div className="employeePanel__data">
        <h1 className="page-title">Panel Pracownika</h1>
        <ul className="employeePanel__list">
          <PanelItem title="Imie:" value={firstName} />
          <PanelItem title="Nazwisko:" value={lastName} />
          <PanelItem title="Email:" value={email} />
          <PanelItem title="Telefon:" value={phone} />
          <PanelItem title="Stawka/h:" value={rate} currency="zł" />
          <PanelItem title="Numer konta bankowego:" value={accountNumber} />
          <PanelItem title="Zarobione pieniądze:" value={moneyEarned} />
          {/*TODO Przy dodawaniu Dnia nie wyświetla się natychmiastowo hoursWorked, dopiero po wejściu jeszcze raz w panel*/}
          <PanelItem title="Suma przerobionych godzin:" value={hoursWorked} />
        </ul>
        <ButtonRemoveEmployee id={id} />
        <div className="employeePanel__addDay">
          <AddDay id={id} timeRecords={timeRecords} />
        </div>
        <div className="employeePanel__timeRecords">
          <TimeRecords timeRecords={timeRecords} rate={rate} />
        </div>
      </div>
    </div>
  );
};

Answer 1

Когда вызывается функция, все правильно. Но я заметил, что при подключении к this.props.location.state нет никаких изменений в компоненте

const EmployeePanel = props => {
  const {
    id,
    firstName,
    lastName,
    email,
    phone,
    rate,
    accountNumber,
    timeRecords,
    moneyEarned,
    hoursWorked,
  } = props.location.state;
  console.log(props);
  return (
    <div className="employeePanel">
      <div className="employeePanel__data">
        <h1 className="page-title">Panel Pracownika</h1>
        <ul className="employeePanel__list">
          <PanelItem title="Imie:" value={firstName} />
          <PanelItem title="Nazwisko:" value={lastName} />
          <PanelItem title="Email:" value={email} />
          <PanelItem title="Telefon:" value={phone} />
          <PanelItem title="Stawka/h:" value={rate} currency="zł" />
          <PanelItem title="Numer konta bankowego:" value={accountNumber} />
          <PanelItem title="Zarobione pieniądze:" value={moneyEarned} />
          <PanelItem title="Suma przerobionych godzin:" value={hoursWorked} />
        </ul>
        <ButtonRemoveEmployee id={id} />
        <div className="employeePanel__addDay">
          <AddDay id={id} timeRecords={timeRecords} />
        </div>
        <div className="employeePanel__timeRecords">
          <TimeRecords timeRecords={timeRecords} rate={rate} />
        </div>
      </div>
    </div>
  );
};

export default EmployeePanel;

https://imge.to/i/IoBlW <- экран с console.log </p>