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

Question

我想在 POST 请求成功后重新加载页面(再次调用获取请求(。假设我有一个后置减速器

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(), [])

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

Answer 1

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

假设你有getPost和saving道具

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

给定此代码，当saving更改其值时，效果将重新运行。

Answer 2

我最终得到了这段代码：

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

这就是用途以前的钩子

export const usePrevious = value => {
const ref = React.useRef()
React.useEffect(() => {
ref.current = value
}, [value])
return ref.current
}