在 react js 中重新加载页面答案

【问题标题】：Reload the page in react js在 react js 中重新加载页面
【发布时间】：2021-09-16 23:40:05
【问题描述】：

我有一个包含不同页面的反应应用程序。在Home 页面上，我添加了来自react-router-dom 的<Prompt/> 组件。

const Home = () => {
  const data = true;
  const [value, setValue] = useState("");
  const onChange = (e) => {
    setValue(e.target.value);
  };
  return (
    <div>
      <Prompt when={!!data} message="Are you sure?" />
      <input value={value} onChange={(e) => onChange(e)} />
      <h2>Home</h2>
    </div>
  );
};

export default Home;

接下来的想法是：用户在输入中添加一些数据，当他点击另一个页面时，会出现弹出窗口，如果用户点击ok按钮，他应该被重定向到另一个页面。该功能运行良好，但是当用户在输入中添加一些数据时，单击Home 链接菜单，然后在模式窗口上单击Ok，输入中的数据仍然存在，但它应该从那里消失。
问题：如何解决上一个问题？我希望在用户单击ok 后，输入中的值应该会消失。
演示：https://codesandbox.io/s/react-router-forked-cr2m4?file=/components/Home.js:71-266

【问题讨论】：

input 完全不受控制...猜你让它受控，或重新安装它，或类似的东西。你试过什么？您可能需要重新考虑您的策略，因为 Prompt 除了允许或阻止导航之外似乎没有太多功能。
@DrewReese，我将组件更改为受控，但我不知道如何检测用户何时单击路线，然后刷新该页面。你能帮忙吗？
如果用户决定从页面导航，我看不到清除输入的任何好处，无论如何它都会被卸载。
@DrewReese，即使是unmounte，但是输入的值还在，用户点击后如何重置？
我认为您误解了......用户要么取消并留在页面上，要么点击确定并离开。如果他们离开，则Home 组件和input 将被卸载。如果他们已经在主页上并尝试导航到主页，这很奇怪，就 react-router-dom 而言，这本质上是一个非操作。是要清除输入的情况吗？

标签： reactjs react-router-dom

【解决方案1】：

这有点骇人听闻，但您可以将生成的 GUID 以路由状态发送到主路径，并通过单击主页链接检查是否已更改以响应允许导航发生。如果路由状态“id”被更新，则重置状态。

索引

import { v4 as uuidV4 } from "uuid";

...

<Link
  to={{
    pathname: "/",
    state: uuidV4() // <-- generate an unique id
  }}
>
  Home
</Link>

首页

import React, { useEffect, useState, useRef } from "react";
import { Prompt, useLocation } from "react-router-dom";

const Home = () => {
  const { state } = useLocation();
  const idRef = useRef(state);

  useEffect(() => {
    if (idRef.current !== state) {
      setValue("");
    }
  }, [idRef, state]);

  const data = true;
  const [value, setValue] = useState("");
  const onChange = (e) => {
    setValue(e.target.value);
  };
  return (
    <div>
      <Prompt when={!!data} message="Are you sure?" />
      <input value={value} onChange={(e) => onChange(e)} />
      <h2>Home</h2>
    </div>
  );
};

【讨论】：