Сделайте запрос POST и обновите БД для каждого пользователя в дочернем компоненте, используя метод жизненного цикла React

Question

В таблице приведены сведения о зарплате пользователей за предыдущий месяц. При нажатии кнопки « Обновить » система получит необходимые данные за этот месяц и вычислит новую зарплату и свойства, а также обновит значения таблицы дочерних компонентов. У дочернего компонента есть и другие кнопки дочернего компонента. При обновлении таблицы r aws новыми значениями «Необходимо сделать почтовый запрос для каждого пользователя и итеративно обновлять базу данных». Здесь происходит бесконечный цикл ( бесконечный запрос POST для обновления БД ) при рендеринге дочернего компонента и его дочерних элементов.

Не могли бы вы предложить способ обновления каждой детали пользователя в базе данных. Способ вызова функции действия Redux ( this.props.updateUserLog (newUserLog.handle, userDetails) ) внутри дочернего компонента « RowComponent ». При повторном рендеринге дочерних элементов запрос POST не должен отправлять цикл.

~ Родительский компонент ~

import { getDriverCommissionAlcohol } from "../redux/actions/dataActions";

class DriverPerfomance extends Component {
  constructor(props = {}) {
    super(props);

    this.state = {
      press: false,
    };
  }

  UpdatePerformance = (event) => {
    this.setState({ press: true });
    this.props.getDriverCommissionAlcohol(month, year);
  };

  render() {
    const {
      data: {
        drivers: { user, month, year, createdAt },
        performance: { driverCommission, alcoholStatus },
      },
      UI: { loadingOffScrean },
    } = this.props;

    let DriverCommissionResults = {};

    if (this.state.press) {
      let combinedUser = {};
      let recent = [];

      if (Object.keys(DriverCommissionResults).length > 0) {
        combinedUser.forEach((filteredPerson) => {
          recent.push(
            <RowComponent
              key={filteredPerson.userId}
              handle={filteredPerson.username}
              monthRetrive={this.state.month}
              yearRetrive={this.state.year}
              month={month}
              year={year}
              drunkenPesentage={filteredPerson.drunkenPesentage}
              press={true}
              newMonthCalculationDone={true}
            />
          );
        });
      } else {
        recent = (
          <Fragment>
            {user.map((filteredPerson) => (
              <RowComponent
                key={filteredPerson.userId}
                handle={filteredPerson.username}
                month={month}
                year={year}
                press={false}
                newMonthCalculationDone={false}
              />
            ))}
          </Fragment>
        );
      }
    }

    return (
      <Fragment>
        <Button disabled={loadingOffScrean} onClick={this.UpdatePerformance}>
          Update
        </Button>
        <table>
          <thead>
            <tr>
              <th></th>
            </tr>
          </thead>
          <tbody>{recent}</tbody>
        </table>
      </Fragment>
    );
  }
}

~ Дочерний компонент ~

import { updateUserLog } from "../redux/actions/dataActions";

class RowComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
      handle: "",
      createdAt: "",
      ranking: 0,
      year: "",
      month: "",
    };
  }

  componentWillReceiveProps() {
    const newUserLog = {
      handle: this.props.handle,
      createdAt: new Date().toISOString(),
      ranking: NewRankingCalculate,
      year: this.props.yearRetrive ? this.props.yearRetrive : this.props.year,
      month: this.props.monthRetrive ? this.props.monthRetrive : "",
    };

    this.mapUserDetailsToState(newUserLog);
  }

  mapUserDetailsToState = (newUserLog) => {
    this.setState({
      handle: newUserLog.handle ? newUserLog.handle : "",
      createdAt: newUserLog.createdAt ? newUserLog.createdAt : "",
      ranking: newUserLog.ranking ? newUserLog.ranking : "",
      year: newUserLog.year ? newUserLog.year : "",
      month: newUserLog.month ? newUserLog.month : "",
    });

    const userDetails = {
      handle: newUserLog.handle,
      createdAt: newUserLog.createdAt,
      ranking: newUserLog.ranking,
      year: newUserLog.year,
      month: newUserLog.month,
    };

    this.props.updateUserLog(newUserLog.handle, userDetails);
  };

  render() {
    const {
      member: { username, year, month, salary },
    } = this.props;
    let action = (
      <DrunkenLog
        handle={username}
        month={this.state.month !== "" ? this.state.month : month}
        year={this.state.year !== "" ? this.state.year : year}
      />
    );
    <tr>
      <td>{initialSalary}</td>
      <td>{this.state.salary !== 0 ? this.state.salary : salary}</td>
      <td>{action}</td>
    </tr>;
  }
}

Ожидание: Обновить таблицу БД для каждого пользователя, вызывая функцию запросов POST внутри методов жизненного цикла дочернего компонента. Остановите бесконечный цикл запросов POST. И сделайте почтовый запрос после изменения реквизита.

Answer 1

1. Я заметил, что выражение if (Object.keys(DriverCommissionResults).length > 0) в ParentComponent всегда будет ложным, верно? потому что DriverCommissionResults - это просто пустой объект, инициализированный двумя строками перед этой проверкой :)
2. попробуйте расширить RowComponent из PureComponent, это гарантирует, что RowComponent будет повторно отображен, только если некоторые из свойств действительно изменились (см. документы: https://reactjs.org/docs/react-api.html#reactpurecomponent)

но мне не нравится сама идея того, что вы здесь делаете. Вы в основном меняете состояние ParentComponent при нажатии кнопки и создаете побочный эффект (в данном случае вызовите сокращение), когда компонент получает реквизиты. Я бы посоветовал:

1. в ParentComponent - сделать побочный эффект (обновить БД) прямо в середине Button.onClick (сохраняя изменения состояния, потому что вам, возможно, нужен какой-то индикатор ожидания).
2. в RowComponent - если у вас есть какие-то побочные эффекты - лучше для них componentDidMount или componentDidUpdate (но во-вторых, вам лучше всегда проверять, действительно ли реквизит действительно отличается от предыдущих!)