使用react-router在具有异步数据的页面之间导航时出错

Question

因此，基本上，有时候当我使用React-router在页面之间滚动时，我尝试转到带有在生命周期运行时运行的异步代码的页面（componentDidMount），它抛出一个错误，提示您无法映射状态'null'。

问题是..如何在页面之间导航时防止这种情况发生？

示例（仪表板）

class Dashboard extends Component {
    componentDidMount() {
        this.props.fetchMovies();
        this.props.fetchSeries();
    }
    handleFetchMovies() {
        if(this.props.assets.fetchMoviesError) {
            return (
                <div className="loading">
                    <h1>{this.props.assets.fetchMoviesError}</h1>
                </div>
            );
        } else if(this.props.assets.loadingMovies) {
            return (
                <div className="loading">
                    <h1>Loading...</h1>
                </div>
            );
        } else {
            return this.props.assets.latestMovies.map(movie => {
                const movieURL = movie.title.split(' ').join('+').toLowerCase().trim();
                return (
                        <div className="latest" key={movie._id}>
                            <Link to={`/movie/${movieURL}`}>
                                <div className="asset-cover" style={{ backgroundImage: `url(${movie.poster})` }}></div>
                            </Link>
                            <h1><Link to={`/movie/${movieURL}`}>{movie.title}</Link></h1>
                            <Link to={`/sort/years/${movie.year }`}>{movie.year}</Link>
                        </div>
                    )
                }
            )
        }
    }

无论何时我从此页面转到其他页面并尝试返回到页面

  

this.props.assets.latestMovies.map不是函数

因为componentDidMount函数没有运行。