Javascript 反应路由器状态？

我有一本书。我正在使用react路由器，但我不明白为什么所有页面的状态都固定为初始呈现的状态，而inputfields共享所有值

import { BrowserRouter as Router, Switch, Route, Link } from "react-router-dom";
import Page from "./Page";

export default function App() {
  return (
    <Router>
      <Link to="/">Home</Link>
      <Link to="/about">About</Link>
      <Link to="/users">Users</Link>

      <Switch>
        <Route path="/about">
          <Page direction="left" />
        </Route>
        <Route path="/users">
          <Page direction="right" />
        </Route>
        <Route path="/">
          <Page direction="up" />
        </Route>
      </Switch>
    </Router>
  );
}

从“react Router dom”导入{BrowserRouter作为路由器、交换机、路由、链路}；
从“/Page”导入页面；
导出默认函数App（）{
返回(
家
关于
使用者
);
}

import React，{useReducer}来自“React”；
导出默认函数页（{direction}）{
让reducer=（state，action）=>state；
let[state，dispatch]=useReducer（reducer，{direction}）；
返回（{state.direction}）
}

这适用于我的页面组件：

import React from "react";

export default function Page(props) {

  return (
    <div>
      <input type="text" />
      {JSON.stringify(props)}
    </div>
  );
}

从“React”导入React；
导出默认功能页（道具）{
返回(
{JSON.stringify（props）}
);
}

您可以通过向每个

页面

组件添加属性

键

来修复它

;

通过这种方式，您将利用差分算法

虽然提供了解决方案，但我认为它缺少对问题原因的解释

问题: 因此，问题在于React如何以优化的方式更新UI。在您的情况下，React将重新使用

页面

组件。因为

Page

组件已经在DOM中，所以React不会创建新组件，而是重新使用

Page

组件的相同实例，并且只更改已更改的数据，在您的情况下，只更改

方向

属性更改

添加

键

道具有效，因为这允许React区分

页面

组件的不同实例

替代解决方案： 当React重新使用

页面

组件时，

页面

组件的uderling实例保持不变，但不同的

道具

会传递给基础实例

在您的代码中，由于当

方向

道具更改时您没有更新状态，因此您看不到不同的状态值

要解决这个问题，您可以使用

useffect

钩子，每当

direction

prop发生变化时，该钩子就会分派一个操作来更新状态

按如下所示更改

Page.js

文件中的代码将解决此问题：

function reducer(state, action) {
  switch (action.type) {
    case "DIRECTION_CHANGE":
      return { ...state, direction: action.payload };
    default:
      return state;
  }
}

export default function Page({ direction }) {
  const [state, dispatch] = useReducer(reducer, { direction });

  useEffect(() => {
    dispatch({ type: "DIRECTION_CHANGE", payload: direction });
  }, [direction]);

  return (
    <div>
      <input type="text" />
      {JSON.stringify(state)}
    </div>
  );
}

功能减速机（状态、动作）{
开关（动作类型）{
案例“方向改变”：
返回{…状态，方向：action.payload}；
违约：
返回状态；
}
}
导出默认函数页（{direction}）{
const[state，dispatch]=useReducer（reducer，{direction}）；
useffect（（）=>{
分派（{类型：“方向改变”，有效载荷：方向}）；
}，[方向]；
返回(
{JSON.stringify（state）}
);
}

---

有关更多详细信息，请参阅：

给定链接上的代码没有运行奇怪的行为，我认为react会自动执行此操作。好的，谢谢。

function reducer(state, action) {
  switch (action.type) {
    case "DIRECTION_CHANGE":
      return { ...state, direction: action.payload };
    default:
      return state;
  }
}

export default function Page({ direction }) {
  const [state, dispatch] = useReducer(reducer, { direction });

  useEffect(() => {
    dispatch({ type: "DIRECTION_CHANGE", payload: direction });
  }, [direction]);

  return (
    <div>
      <input type="text" />
      {JSON.stringify(state)}
    </div>
  );
}