Question

使用 React 17 和 React Router Dom 5.2 我遇到了一个奇怪的现象。在一个简单的 CRUD 应用程序中，有一个用于列出所有项目的组件，一个用于创建，一个用于编辑。

稍微简化一下，代码如下：

父母：

<Switch>
    <Route path="/item/create" component={ItemCreatePage}></Route>
    <Route path="/item/:itemId" component={ItemEditPage}></Route>
    <Route path="/item" component={ItemList}></Route>
</Switch>

创建：

import React from "react"
import { useHistory } from "react-router-dom"
import { ItemCreateOrEditComponent } from "./item-create-and-edit"
import { CreateItemInput, useCreateItemMutation } from "/types"

export const ItemCreatePage: React.FC = () => {
    const history = useHistory()
    const [createItemMutation] = useCreateItemMutation()

    async function createItem(itemToSave: CreateItemInput) {
        await createItemMutation({ variables: { data: itemToSave } })
        history.push(`/item`)
    }

    return <ItemCreateOrEditComponent createOrEdit="create" saveFunction={createItem}></ItemCreateOrEditComponent>
}

编辑：

import React, { useState } from "react"
import { RouteComponentProps, useHistory } from "react-router-dom"
import { ItemCreateOrEditComponent } from "../../../components/form/item-create-and-edit"
import { UpdateItemInput, useItemQuery, useUpdateItemMutation } from "/types"

type Props = RouteComponentProps<{ itemId: string }>

export const ItemEditPage: React.FC<Props> = (props) => {
    const itemId = props.match.params.itemId
    const [item, setItem] = useState<UpdateItemInput | undefined>(undefined)
    const { data } = useItemQuery({ variables: { id: itemId } })

    const history = useHistory()
    const [updateItemMutation] = useUpdateItemMutation()
    React.useEffect(() => {
        if (data?.item) {
            setItem(data.item)
        }
    }, [data])

    async function updateItem(itemToSave: UpdateItemInput) {
        await updateItemMutation({ variables: { data: itemToSave, }, })
        history.push(`/item`)
    }
    
    return <ItemCreateOrEditComponent inputItem={item} createOrEdit="edit" saveFunction={updateItem}></ItemCreateOrEditComponent>
}

所以，create 和 edit 做的事情基本相同：使用 ItemCreateOrEditComponent，触发数据库函数进行保存（在本例中为 Apollo GraphQL，但无关紧要）然后返回列表：history.push("/item")。然而，奇怪的是：编辑后，列表刷新了更新的项目。创建后，列表不更新。

这不是竞争条件，在 history.push("/item") 之前添加几秒钟的超时不会改变任何东西。

我看到的创建和编辑之间的唯一区别是

为了编辑，数据从后端获取
对于编辑，有一个包含项目 ID 的 URL 属性

我无法想象为什么这两件事会对是否触发刷新产生任何影响。

编辑： ItemCreateOrEditComponent 提供一个表单，进行一些验证和转换，然后最终以完全相同的方式调用 this.props.saveFunction(this.state.item) 进行编辑和创建。在谈到 history.push 之前，我看不出那里的行为有任何不同。

history.push 有时会触发刷新有时不会

0 个答案: