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的屏幕

组件不刷新值

1 个答案: