如何解决React页面未加载新内容
我正在尝试以声明方式重定向页面。
这是我的Header.js:
const Header = () => {
const [data,setData] = useState({ objects: [] });
useEffect(async () => {
const result = await axios.get(
"http://example.com/api/v1/categories"
);
setData(result.data);
},[]);
return (
<div>
{courses.map( objects => (
<Link to={`/cats/${objects.id}`}>{objects.title}</Link>
))}
</div>
);
};
export default Header;
这是我的App.js
class App extends Component {
render(){
return (
<Router>
<Redirect exact from="/" to="/index" />
<Route path = "/" component = {App}>
<Header/>
<Route path="/cats/:objectId" component={CoursePage} />
</Route>
</Router>
);
}
}
export default App;
这是CoursePage.js:
const CoursesPage = (props) => {
let { objectId } = useParams();
const [data,setData] = useState({ courses: [] });
useEffect(() => {
(async () => {
const result = await axios.get(
"http://example.com/api/v1/cats/"+objectId
).catch(err => {
console.error(err);
});
setData(result.data);
})();
},[]);
return (
<Fragment>
{courses.title}
</Fragment>
);
};
export default CoursesPage;
在标题上,我单击链接。它成功重定向到课程页面。但是,当我再次单击另一个课程链接时,它不会重新加载组件,也不会加载新数据。 URL更改,但页面未更改。
如何强制页面重新加载组件?
解决方法
您应该将CoursePage
中的useEffect依赖项数组更改为依赖于objectId
,只要对象ID更改,它将重新运行效果。
const CoursesPage = (props) => {
let { objectId } = useParams();
const [data,setData] = useState({ courses: [] });
useEffect(() => {
(async () => {
setData({ courses: [] }); // add this line
const result = await axios.get(
"http://example.com/api/v1/cats/"+objectId
).catch(err => {
console.error(err);
});
setData(result.data);
})();
},[objectId]); // Update dependency array here
return (
<Fragment>
{courses.title}
</Fragment>
);
}
export default CoursesPage;
一旦对象ID更改,这将重置之前的数据,然后再加载新的数据。
如果要在url中进行参数更改时完全重新安装组件,则可以在组件根元素中添加一个id。
return (
<Fragment key={objectId}>
{courses.title}
</Fragment>
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。