在反应中显示确认消息 2 次

问题描述

当用户不保存数据并更改页面时，在反应钩子中显示确认消息。问题是当我单击是按钮将 url 更改为另一个页面但再次确认消息显示并再次单击是按钮显示另一个页面时。没有按钮点击同样的网址也不会改变，但再次显示确认消息。请有人帮助我我需要修复或检查什么...

test.jsx

import React from "react";
import {useHistory,Prompt} from "react-router-dom";
import {Container,Table,Button} from "react-bootstrap";

const distDestSettingView = () => {
    const [isSave,setIsSave] = React.useState(false);
    const [value,setValue] = React.useState("");


    const handleChangeValue = e => {
        setValue(e.target.value)
        setIsSave(e.target.value.length > 0)
    }

    const handleSave = (e) => {
        e.preventDefault();
        setIsSave(false);
    }
    return (
        <test>
            <div>
                <table>
                    <thead>
                    <tr>
                        <th><h1>Show Confirm prompt</h1></th>
                    </tr>
                    </thead>
                    <tbody>
                    <tr>
                        <td>
                            <input

                                placeholder="type something to block transitions"
                                onChange={handleChangeValue}/>
                        </td>
                        <td>
                            <Button className="test" id="run-button" onClick={handleSave}></Button>
                        </td>
                    </tr>
                    </tbody>
                </table>
            </div>
            <Prompt
                when={isSave}
                message={
                    `Are you sure you want to leave page?`
                }/>
        </test>
    )
}

App.jsx

import React from "react";
import { browserRouter as Switch,Route } from "react-router-dom";
import menu from "./pages/Menu/Menu";
import test from "./pages/test";
import Login from "./pages/Login";

const AppRoute = () => (
    <Switch>
        <Route exact path="/" component={Login} />
        <Route path="/test" component={test} />
        <Route path="/menu" component={menu}/>
    </Switch>
);
export default AppRoute;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）

prompt prompt react-hooks