Я прочитал и очень старался, но все еще не мог найти способ успешно заменить componentWillReceiveProps на getDerivedStateFromProps. Вот мой код, componentWillReceiveProps один работает нормально. но getDerivedStateFromProps, который я пробовал, не работает (после того, как componentDidMount () работает нормально, state.movies в конечном итоге становится [] пустым). Спасибо за вашу любезную помощь!
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.movies в конечном итоге становятся [] пустыми). .... TT
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;
Большое спасибо!