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"
},
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
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"时，保持挂载路由组件并简单地重置countnyatakan dan sebaliknya.const Tab = ({ name, children = [] }) => { const id = uuid(); const [count, setCount] = useState(0); useEffect(() => { setCount(0); // { e.preventDefault(); setCount(c => c + 1); }; const style = { background: "cyan", margin: "1em", }; return (
);
};{name} Tab
Render ID: {id}
Counter: {count}
{children}Ini akan menjadikan pengoptimuman RRD berfungsi untuk anda, bukan menentang anda.
Jika anda tidak mempunyai
. Ambil perhatian bahawa ini menggabungkan beberapa logik komponen dalaman dengan butiran luaran.name这样的传递道具可以从中获取提示，则可以使用location.pathnameseperti
Contoh: 🎜const { pathname } = useLocation(); const [count, setCount] = useState(0); useEffect(() => { setCount(0); }, [pathname, setCount]);Ini berfungsi dengan
Switchdalam react-router-domAkhirnya, 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上。我通常将其添加到Routekerana ia lebih masuk akal pada pendapat saya: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.