POST 请求成功后使用钩子重新加载页面答案

【问题标题】：Reload page after POST request success with hooksPOST 请求成功后使用钩子重新加载页面
【发布时间】：2019-08-16 20:57:52
【问题描述】：

我想在使用钩子 POST 请求成功后重新加载页面（再次调用 get 请求）。假设我有一个 post reducer

const post = {
    isLoading: false
    isSaving: false
    data: any
    error: string
}

通常当我创建一个类组件时

componentDidMount() {
    this.props.getPost()
}

componentDidUpdate(prevProps) {
 // When create new Post successfully, get post again
 if (prevProps.post.saving && this.props.post.saving) {
  this.props.getPost()
 }
}

但是当用钩子做同样的事情时，我知道如何获取帖子但不知道如何在成功创建新帖子后重新加载它

// Get post on did mount
React.useEffect(() => getPost(), [])

你们能告诉我怎么做吗？非常感谢

【问题讨论】：

标签： reactjs react-hooks

【解决方案1】：

您可以复制 componentDidUpdate 功能，尤其是 prevProps.post.saving && this.props.post.saving 使用 useEffect 钩子这样：

假设你有 getPost 和 saving 道具

React.useEffect(() => saving && getPost(), [saving])

鉴于此代码，当saving 更改其值时，您的效果将重新运行。

【讨论】：

【解决方案2】：

我最终得到了这段代码：

const prevSaving = usePrevious(post.saving)
    useEffect(() => {
        if (prevSaving && !post.saving) {
            getPost()
        }
    }, [post.saving])

这是 usePrevious 钩子

export const usePrevious = value => {
    const ref = React.useRef()

    React.useEffect(() => {
        ref.current = value
    }, [value])

    return ref.current
}

【讨论】：