Question

我想在带有钩子的POST请求成功后重新加载页面（再次调用get请求）。假设我有一个减速器

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

您可以使用{ 'Title':'AACN Advanced Critical Care', 'Item_ID':[ { 'Type':'Print_ISSN', 'Value':'1559-7768' }, { 'Type':'Proprietary', 'Value':'Ovid:01256961' } ], 'Platform':'OvidMD', 'Publisher':'American Association of Critical Care Nurses', 'Publisher_ID':[ { 'Type':'Proprietary', 'Value':'Ovid:21790' } ], 'Performance':[ { 'Period':{ 'Begin_Date':'2019-02-01', 'End_Date':'2019-02-28' }, 'Instance':[ { 'Metric_Type':'Total_Item_Requests', 'Count':1 }, { 'Metric_Type':'Unique_Item_Requests', 'Count':1 } ] } ] }钩子复制componentDidUpdate功能，尤其是prevProps.post.saving && this.props.post.saving：

假设您有useEffect和getPost个道具

saving

鉴于此代码，当React.useEffect(() => saving && getPost(), [saving])更改其值时，您的效果将重新运行。

Answer 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
}

带有钩子的POST请求成功后重新加载页面

2 个答案: