如何用getDerivedStateFromProps替换componentWillReceiveProps

Question

我阅读并尝试了很努力，但是仍然找不到用getDerivedStateFromProps成功替换componentWillReceiveProps的方法。 这是我的代码，componentWillReceiveProps一个工作正常。 但是我尝试过的getDerivedStateFromProps无法正常工作（componentDidMount（）运行正常之后，state.movi​​es最终变为[]为空）。 感谢您的帮助！

class OK_MovieListContainer extends React.Component {


    constructor(props) {
        super(props);
        this.state = {
            movies: [],
            title:''
        };
        this.discoverMovieDB = this.discoverMovieDB.bind(this);
        this.searchMovieDBAPI = this.searchMovieDBAPI.bind(this);

    }

    componentDidMount() {
        this.discoverMovieDB();

    }


    UNSAFE_componentWillReceiveProps(nextProps, prevState) {

        if (nextProps.match.params.title && prevState.title !== nextProps.match.params.title) {

            this.searchMovieDBAPI(nextProps.match.params.title);
            this.setState({ title: nextProps.match.params.title });

        }
    }



    async discoverMovieDB() {

      .....
    }



     async  searchMovieDBAPI(title) {
        const promisedData = await MovieDBAPI.search(title);

        if (promisedData) {
                this.setState({ movies: promisedData[0] }); 
            }

        }


    }


    render() {

        return (       
            <div className="App">
                <MovieList movies={this.state.movies} />
            </div>

        );
    }
}

export default OK_MovieListContainer;

以下是我尝试使用getDerivedStateFromProps进行的操作，但没有工作（在componentDidMount（）运行正常之后，state.movi​​es最终变为[]为空）。 .... T.T

class MovieListContainer extends React.Component {



    constructor(props) {
        super(props);
        this.state = {
            movies: [],
            title:''
        };
        this.discoverMovieDB = this.discoverMovieDB.bind(this);
        this.searchMovieDBAPI = this.searchMovieDBAPI.bind(this);

    }



     static getDerivedStateFromProps(nextProps, prevState) {

         if (nextProps.match.params.title && nextProps.match.params.title !== prevState.title) {

             return {
                 //this state changes then componentDidUpdate is called
                 title: nextProps.match.params.title
             };
         }

         //indicate state update not required
         return null;       
    }

    componentDidMount() {
        this.discoverMovieDB();

    }


    componentDidUpdate(nextProps, prevState) {

        if (nextProps.match.params.title !== prevState.title) {

            this.searchMovieDBAPI(nextProps.match.params.title);
            this.setState({ title: nextProps.match.params.title });
        }

    }


    async discoverMovieDB() {

       .....
    }


     async  searchMovieDBAPI(title) {
        const promisedData = await MovieDBAPI.search(title);

        if (promisedData) {

                this.setState({ movies: promisedData[0] });
            }

        }


    }


    render() {

        return (


            <div className="App">
                <MovieList movies={this.state.movies} />
            </div>

        );
    }
}

export default MovieListContainer;

非常感谢您！