Question

我目前正在为我的小项目开发Preact。我的一个页面是Master Detail页面。左侧是详细页面，右侧是列表页面。问题是每当我点击右侧列表页面上的链接时，详细信息页面未呈现为卡住但在重新加载页面时正确呈现。请帮我解决一下。

左侧

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>
            );
        }
    }
}

Answer 1

您只在this.fetchAPI(url)中致电componentDidMount。如果对于所有课程使用相同的组件，则不会一次又一次地安装，而是仅安装一次。而是在更改URL时只会传递新的道具。

你应该在this.fetchAPI(url) / componentWillReceiveProps中调用componentWillUpdate（这是在改变道具时调用的，这应该可以解决你的问题

单击超链接时，preact-router无法正常工作

1 个答案: