React路由动态子菜单URL更改，但只有第一次点击子菜单视图更改

Question

我正在从一个菜单下的数据库获取动态子菜单。我的问题是，当我点击一个子菜单，它的工作很好，视图也在变化。之后，我点击任何子菜单它不会改变它的视图内容也会从数据库中获取，但URL会改变。

就像我有一个名为Services的菜单，在它下面有使用API获取的动态子菜单。

服务菜单

Web开发

• 应用程序开发

在App.js

class App extends React.Component {
render() {
return (
<div>
<Router>
<Header />
<div>
<Switch>
<Route path="/contact">
<Contact />
</Route>
<Route path="/about">
<About />
</Route>
<Route path="/service/:id">
<Service />
</Route>

<Route path="/">
<Homepage />
</Route>
</Switch>
</div>
<Footer />
</Router>
</div>
);
}
}
export default App;
if (document.getElementById('app')) {
ReactDOM.render(<App />, document.getElementById('app'));
}

In Service.js page

const Service = (props) =>{
const [service, setservice] = useState([]);
const id = props.match.params.id;
React.useEffect(() => {
fetch("http://127.0.0.1:8000/api/service/"+ id)
.then(results => results.json())
.then(res => {
const service = res.data.service;
setservice(service);
});
}, []);
return (
<div>
{
service.map((service, index) =>(
<div key={index}>
<h6 className="heading ">{service.service_name}</h6>             
</div>
))
}
</div>
);
}
export default withRouter(Service);

Answer 1

"这是因为你只运行一次函数，你需要它在每次有新的点击时都运行。在你的useEffect中，试着把id作为一个依赖项，看看会发生什么"…

const id = props.match.params.id
React.useEffect(() => {
fetch('http://127.0.0.1:8000/api/service/' + id)
.then((results) => results.json())
.then((res) => {
const service = res.data.service
setservice(service)
})
}, [id])