componentWillReceiveProps 生命周期内的 setState 重构 HOC答案

【问题标题】：setState inside componentWillReceiveProps lifecycle Recompose HOCcomponentWillReceiveProps 生命周期内的 setState 重构 HOC
【发布时间】：2018-08-05 05:57:13
【问题描述】：

每次收到新的即将到来的道具时，我都想更改本地状态。为此，我使用来自Recompose 库的lifecycle HOC。但这并不像我想的那么简单。我要么永远设置该值，要么在使用回调时发生堆栈溢出。

import { connect } from 'react-redux';
import { withState, withProps, lifecycle, compose } from 'recompose';
import { selectors, testDelete, testSubscribe } from 'ducks/entities/tests';
import { Tests } from 'components/tests/all-tests';

export default compose(
  connect(selectors.tests, {
    onTestDelete: testDelete,
    onTestSubscribe: testSubscribe,
  }),
  withState('isDeleteModalOpen', 'setDeleteModalShow', false),
  withState('idToDelete', 'setIdToDelete', 0),
  withProps(
    ({
      tests,
      idToDelete,
      setIdToDelete,
      setDeleteModalShow,
      onTestDelete,
      onTestSubscribe,
    }) => ({
      tests: tests.map((t) =>
        t.merge({
          onDeleteModalShow: () => {
            setDeleteModalShow(true);
            setIdToDelete(t.get('id'));
          },
          onSubscribe: () => onTestSubscribe(t.get('id')),
        }),
      ),
      onDeleteModalHide: () => setDeleteModalShow(false),
      onDelete: () => onTestDelete(idToDelete),
    }),
  ),
  lifecycle({
    componentWillReceiveProps({ setDeleteModalShow }) {
      setDeleteModalShow(false); // Not workding "Maximum update depth exceeded"

      this.setState({
        isDeleteModalOpen: false,
      }); // now working
    },
  }),
)(Tests);

【问题讨论】：

标签： javascript recompose

【解决方案1】：

有点老问题，但答案相当简单。

如果您设置的值已经是您想要的值，请不要更改状态。在您的代码中，您可以更改 lifecycle 增强器以检查 isDeleteModalOpen 是否已经为假，如下所示：

lifecycle({
  componentWillReceiveProps({ setDeleteModalShow, isDeleteModalOpen }) {
    if (isDeleteModalOpen) setDeleteModalShow(false);
  },
}),

这样你的componentWillReceiveProps 函数会命中两次，第二次它什么也不做。

请注意，此组件上的任何 prop 更改都会将 isDeleteModalOpen 值设置为 false。

【讨论】：