Mengapa useState dikongsi antara laluan dengan prop yang berbeza?

Question

Saya mempunyai apl dengan dua tab "Apple" dan "Banana". Setiap tab mempunyai pembilang yang dilaksanakan menggunakan useState.

const Tab = ({ name, children = [] }) => {
  const id = uuid();
  const [ count, setCount ] = useState(0);

  const onClick = e => {
    e.preventDefault();
    setCount(c => c + 1);
  };

  const style = {
    background: "cyan",
    margin: "1em",
  };

  return (
    <section style={style}>
      <h2>{name} Tab</h2>
      <p>Render ID: {id}</p>
      <p>Counter: {count}</p>
      <button onClick={onClick}>+1</button>
      {children}
    </section>
  );
};

Mengelirukan status kaunter dikongsi antara dua tab!

Jika saya menambah pembilang pada satu tab dan kemudian beralih ke tab lain, pembilang juga berubah.

Kenapa ni?

---

Ini adalah aplikasi lengkap saya:

import React, { useState } from "react";
import { createRoot } from "react-dom/client";
import { v4 as uuid } from "uuid";
import { HashRouter as Router, Switch, Route, Link } from "react-router-dom";

const Tab = ({ name, children = [] }) => {
  const id = uuid();
  const [ count, setCount ] = useState(0);

  const onClick = e => {
    e.preventDefault();
    setCount(c => c + 1);
  };

  const style = {
    background: "cyan",
    margin: "1em",
  };

  return (
    <section style={style}>
      <h2>{name} Tab</h2>
      <p>Render ID: {id}</p>
      <p>Counter: {count}</p>
      <button onClick={onClick}>+1</button>
      {children}
    </section>
  );
};

const App = () => {
  const id = uuid();

  return (
    <Router>
      <h1>Hello world</h1>
      <p>Render ID: {id}</p>
      <ul>
        <li>
          <Link to="/apple">Apple</Link>
        </li>
        <li>
          <Link to="/banana">Banana</Link>
        </li>
      </ul>
      <Switch>
        <Route
          path="/apple"
          exact={true}
          render={() => {
            return <Tab name="Apple" />;
          }}
        />
        <Route
          path="/banana"
          exact={true}
          render={() => {
            return <Tab name="Banana" />;
          }}
        />
      </Switch>
    </Router>
  );
};

const container = document.getElementById("root");
const root = createRoot(container);

root.render(<App />);

---

Versi:

  "dependencies": {
    "react": "^18.2.0",
    "react-dom": "^18.2.0",
    "react-router": "5.2.1",
    "react-router-dom": "5.2.1",
    "uuid": "^9.0.0"
  },

Answer 1

Adam mempunyai penjelasan dan jawapan yang baik tentang perkara yang berlaku di sini, ia adalah pengoptimuman yang tidak meruntuhkan dan memasang semula komponen React yang sama hanya kerana laluan URL berubah. Menggunakan kekunci React pasti akan menyelesaikan masalah ini, memaksa React untuk memasang semula keadaan Tab 组件，从而“重置”count.

Saya cadangkan gunakan kaedah lain apabila name 属性从 "apple" 更改为 "banana" 时，保持挂载路由组件并简单地重置 count nyatakan dan sebaliknya.

const Tab = ({ name, children = [] }) => {
  const id = uuid();
  const [count, setCount] = useState(0);

  useEffect(() => {
    setCount(0); // <-- reset to 0 when name prop updates
  }, [name, setCount]);

  const onClick = e => {
    e.preventDefault();
    setCount(c => c + 1);
  };

  const style = {
    background: "cyan",
    margin: "1em",
  };

  return (
    

      
{name} Tab
      
Render ID: {id}
      
Counter: {count}
      +1
      {children}
    
  );
};

Ini akan menjadikan pengoptimuman RRD berfungsi untuk anda, bukan menentang anda.

Jika anda tidak mempunyai name 这样的传递道具可以从中获取提示，则可以使用 location.pathname seperti

. Ambil perhatian bahawa ini menggabungkan beberapa logik komponen dalaman dengan butiran luaran.

Contoh: 🎜

const { pathname } = useLocation();
const [count, setCount] = useState(0);

useEffect(() => {
  setCount(0);
}, [pathname, setCount]);

Answer 2

Ini berfungsi dengan Switch dalam react-router-dom

Akhirnya, pokok komponen anda kekal sama walaupun anda bertukar laluan.

Sentiasa Penghala -> Suis -> Penghalaan -> Tab

Disebabkan cara Switch berfungsi, React tidak pernah "memasang" komponen baharu, ia hanya menggunakan semula pokok lama kerana ia boleh.

Saya pernah mengalami masalah ini sebelum ini dan penyelesaiannya ialah menambah kunci di suatu tempat, contohnya dalam Tab 或 Route 上。我通常将其添加到 Route kerana ia lebih masuk akal pada pendapat saya:

         {
            return ;
          }}
        />
         {
            return ;
          }}
        />
      

Lihat blitz tindanan ini:

https://stackblitz.com/edit/react-gj5mcv ?file=src/App.js

Sudah tentu, keadaan anda akan ditetapkan semula dalam setiap tab apabila ia dipunggah, yang mungkin sesuai atau tidak. Tetapi penyelesaian untuk ini sudah tentu (jika ini adalah isu untuk anda), seperti biasa, untuk meningkatkan status.