React中useState导致组件多实例状态异常共享问题咨询

React Router 在切换同一路径模板（如 /ideas/:id）的不同参数时，会复用同一个 <Idea> 组件实例，而非销毁后重建。这就导致组件内部的 useState 状态会保留上一次路由的取值，不会自动重置。

方案一：监听路由参数变化，手动重置状态 #

通过 useEffect 监听 id 参数的变化，当参数更新时调用 setTest 重置输入框状态：

import './Idea.css';
import { useState, useEffect } from 'react';
import { useParams } from 'react-router-dom';

function Idea() {
  const { id } = useParams();
  const [ test, setTest ] = useState('');

  // 路由id变化时重置输入框
  useEffect(() => {
    setTest('');
  }, [id]); // 依赖项为id，仅当id改变时执行

  console.log('Idea rendered');

  const handleChange = (event) => {
    setTest(event.target.value);
  };
  
  return (
    <form>
      <input onChange={handleChange} value={test}/>
    </form>
  );
};

export default Idea;

方案二：通过 key 属性强制创建新组件实例 #

给路由中的 <Idea> 组件添加唯一的 key 属性（值为当前路由的 id），React 会认为不同 key 的组件是独立实例，切换路由时会销毁旧实例并创建新实例，状态自然重置：

修改 App 中的路由配置：

function App() {
  return (
    <Provider store={store}>
      <BrowserRouter>
        <main>
          <SideBar />
          <section id='main-window'>
            <Routes>
              <Route exact path="/" element={ <Instructions /> } />
              <Route path="/ideas/:id" element={ 
                ({ params }) => <Idea key={params.id} /> 
              } />
            </Routes>
          </section>
        </main>
      </BrowserRouter>
    </Provider>
  );
};

• 方案一复用组件实例，仅重置状态，性能更优，适合组件逻辑复杂、希望保留部分状态的场景。
• 方案二完全隔离不同路由的组件状态，实现更直接，适合需要完全独立实例的场景。

内容的提问来源于stack exchange，提问作者John A. Dixon