如何在 recompose 中使用 setTimeout 更新状态？答案

【问题标题】：How to update state using setTimeout in recompose?如何在 recompose 中使用 setTimeout 更新状态？
【发布时间】：2018-08-24 05:30:14
【问题描述】：

我想学习重构，所以我从一个简单的组件组件开始：

const timer: React.SFC<MyProps | any> = ({ seconds }) => (
  <span>{ seconds }</span>
);

我想以某种方式使用 recompose 将 seconds 传递给它，它会每秒递增。

let seconds = 0;
export default compose(
  withProps(() => ({ seconds })),
  pure,
)(Timer);

如何正确增加 seconds 道具，以便在道具更改时将其传播到组件？我尝试在 let seconds 声明之后使用 setTimeout 添加递归函数，但它不会在更改时向下传播到组件。

我最终得到了这个

let seconds = 0;

incrementSeconds();

function incrementSeconds() {
  seconds += 1;
  setTimeout(
    () => {
      incrementSeconds();
    },
    1000,
  );
}

export default compose(
  withProps(() => ({ seconds })),
  pure,
)(Timer);

【问题讨论】：

标签： javascript reactjs recompose

【解决方案1】：

我会使用withState，而不是withProps，然后像这样更新状态

export default compose(
  withState('seconds', 'updateSeconds', 0),
  lifecycle({
     componentDidMount() {
         const { seconds, updateSeconds} = this.props;
         setTimeout(
            () => {
               updateSeconds(seconds + 1);
            },
            1000,
         );
     }
  }),
  pure,
)(Timer);

【讨论】：

缺少递归，但它有所帮助。它现在对我有用，谢谢！