我目前正在为我的小项目开发 Preact。我的页面之一是主详细信息页面。左侧为详情页，右侧为列表页。问题是每当我单击右侧列表页面上的链接时，详细页面不会呈现为卡住，但在重新加载页面时会正确呈现。请帮助我如何解决它。
左边
fetchAPI(url) {
return fetch(url)
.then((response) => {
if (response.status >= 400) {
throw new Error('Bad response from server');
}
return response.json();
});
}
componentDidMount() {
const that = this;
const url = 'https://blah.com/' + this.props.courseId;
const instituteUrl = 'https://blah.com/';
this.fetchAPI(url).then((data) => {
this.fetchAPI(instituteUrl + data.institute_id).then((instituteData) => {
that.setState({
result: data,
institute: data.institute,
courses: instituteData.courses.rows
});
});
});
}
componentWillUnmount() {
}
render({ }, { result={}, institute={}, courses=['', '', '', '', '', '', '', '', '', ''] }) {
return (
<div class={style.category}>
<div class={style.content}>
<Title title={result.title} />
<SubTitle subtitle={institute.name} />
<Description description={result.html_description} />
</div>
<div class={style.listContent}>
{ courses.map( result => (
<CoursesList result={result} target="_parent" />
)) }
</div>
</div>
);
}
正确的列表
export default class CoursesList extends Component {
render() {
if (this.props.result.title && this.props.result.title !== '') {
return (
<div class={style.coursesList}>
<div class={style.withpreview}>
<Link href={'/course/' + changeSlug(this.props.result.title) + '/' + this.props.result.id}>{this.props.result.title}</Link>
</div>
</div>
);
} else {
return (
<div class={style.coursesList}>
<div class={style.withoutpreview}></div>
</div>
);
}
}
}