如何使用带有 setTimeout 的 React 的 getDerivedStateFromProps？答案

【问题标题】：How to use React's getDerivedStateFromProps with a setTimeout?如何使用带有 setTimeout 的 React 的 getDerivedStateFromProps？
【发布时间】：2018-10-11 10:13:30
【问题描述】：

我想创建一个类似于 Modal 的组件，它接收一个打开/关闭的布尔值作为道具，然后将该值存储在组件状态中。关闭 Modal 时，我想更新 close boolean prop，但在更新组件状态之前等待几秒钟，以便我可以添加过渡类并为退出设置动画。

使用componentWillReceiveProps，我可以通过在超时中包装this.setState 并同时添加类来完成此操作。使用新的 React 16.3 API，我看到 is is recommended 改为使用 getDerivedStateFromProps。

由于getDerivedStateFromProps“应该返回一个对象来更新状态，或者null表示新的道具不需要任何状态更新，”（React docs）我希望方法看起来像这样：

static getDerivedStateFromProps(nextProps, prevState) {
    if (nextProps.menuIsOpen === false && prevState.menuIsOpen === true) {
        return setTimeout(() => { menuIsOpen: false}, 1000);
    }
    return null;
}

但这不起作用。 I've read setTimeout 没有返回值，但我想知道是否有比返回承诺更优雅的问题解决方案。

【问题讨论】：

尝试在 componentDidUpdate 而不是 componentWillReceiveProps 中做你之前所做的事情。

标签： javascript reactjs settimeout

【解决方案1】：

你可以使用componentDidUpdate:

componentDidUpdate(prevProps){
    // update your class names...
    if (!this.props.menuIsOpen && this.state.menuIsOpen) {
        setTimeout(() => this.setState({ menuIsOpen: false}), 1000);
    }
}

【讨论】：

这是正确的。您还需要考虑如果模态被快速连续打开和关闭并再次打开会发生什么，因为您可能会遇到竞争条件，除非您还在状态中跟踪isAnimating 之类的内容并小心重置它/必要时取消超时。一旦你让它工作，我可能会建议将转换逻辑提取到带有render prop API 的单独的<DelayProp> 组件中，以便您可以重复使用它。
我要补充一点，由于 setTimeout 是异步的，所以在未安装的组件上调用 setState 可能会引发错误。