0

我正在使用componentWillReceiveProps生命周期事件来启用或禁用到下一页的转换。现在这个事件改为UNSAFE_componentWillReceiveProps，我觉得我不应该再使用它了，但是我找不到明显的替代品。

组件的位置来自props.location.pathname，所以我需要一个事件，我可以在其中访问上一个和下一个道具，然后根据是否应该有过渡来设置组件的初始外观，但是：

  • getDerivedStateFromProps只能访问以前的道具。
  • shouldComponentUpdate应该用于告诉组件是否应该更新，这不是我们想要的，所以它被淘汰了。
  • render没有以前的道具。
  • getSnapshotBeforeUpdate将参数传递给componentDidUpdate，此时组件已经渲染，所以我无法设置初始外观。

我想我可以保存以前的路径名并在下次使用它render，但这似乎不是一个优雅的解决方案。在这种情况下，最佳做法是什么？

4

3 回答 3

1

你说

getDerivedStateFromProps only has access to the previous props.

但是 getDerivedStateFromProps 可以访问下一个道具和上一个状态

保存以前的路径名可能看起来不优雅，我同意，但它是这里提供的替代方法：https ://codesandbox.io/s/rjyvp7l3rq在这里找到https://reactjs.org/blog/2018/06/07/you -probably-dont-need-derived-state.html。

看一下将 prev props 保存在 state 中的 uncontrolledEmailInput 组件

state = {
    email: this.props.defaultEmail,
    prevPropsUserID: this.props.userID
  };

  static getDerivedStateFromProps(props, state) {
    // Any time the current user changes,
    // Reset any parts of state that are tied to that user.
    // In this simple example, that's just the email.
    if (props.userID !== state.prevPropsUserID) {
      return {
        prevPropsUserID: props.userID,
        email: props.defaultEmail
      };
    }
    return null;
  }

这是一篇关于新生命周期的精彩文章：https ://medium.com/@baphemot/understanding-react-react-16-3-component-life-cycle-23129bc7a705

于 2018-09-24T16:45:43.643 回答
1

你可以使用下面哪个是安全的，并且由 Reactjs 推荐

componentDidUpdate(prevProps) { 

     if (this.props.userID !== prevProps.userID) {

        this.fetchData(this.props.userID); 

    }
 }
于 2018-09-24T16:07:22.133 回答
0

根据反应文档，您应该使用 componentDidUpdate。它可以访问 prevProps、prevState 和 current props，state 在 this.props、this.state 中。

看看文档 https://reactjs.org/docs/react-component.html#componentdidupdate

componentDidUpdate(prevProps) {
    if(this.props.pathname !== prevProps.pathname) {
      //do something here or setState to adjust the appearance accordingly
    }
}
于 2018-09-24T16:51:59.043 回答