Как спровоцировать re-render дочернего компонента?

Question

[fOrZe0]

Здравствуйте! Имеется класс Library, который рендерит ещё два компонента: Filter и LibraryContent. В LibraryContent через props передается некий адрес(хранится в state родительского компонента), по которому он берет данные и отображает их. Потом, в результате действий пользователя, в Library
вызывается метод handleFilterChange, который меняет адрес в state. Но LibraryContent не перерисовывается. Я хочу, что бы он заново отрендерился и брал данные по новому адресу.

export default class Library extends React.Component {
    constructor(props) {
        super(props);
        
        this.state = {
            url: '<адрес стороннего ресурса c какими-то параметрами>',
        }
    }


    handleFilterChange = (name, event) => {
        this.setState({
            url: '<адрес с новыми параметрами>'
        });
    };

    render() {
        return (
            <div className="library">
                <Filter/>
                <LibraryContent
                    url={this.state.url}
                />
            </div>
        )
    }
}

UPD:

Компонент LibraryContent

export default class Library extends React.Component {


    constructor(props){
        super(props);

        this.state = {
            films: []
        };

        this.getData = this.getData.bind(this);

    }

    getData(){
        console.log(this.props.url);
        fetch(this.props.url)
            .then(response => {
                    if (response.status !== 200) {
                        console.log('Код ошибки : ' +
                            response.status);
                        return;
                    }

                    // Examine the text in the response
                    response.json().then(data => {
                        this.setState({films: data.results}, () => {
                            //console.log(this.state.films);
                        });
                    });
                }
            )
            .catch(function(err) {
                console.log('Fetch Error :-S', err);
            });
    };

    componentDidMount(){
        this.getData();
    }

    render() {

        const films = this.state.films.map(item =>
            <div key={item.id} className={"film"}>
                <FilmCard title={item.name}
                          imgUrl={this.props.imgUrlPrefix + item.poster_path}
                          overview={item.overview.substr(0, 150) + "..."}
                          movieUrl={"/library/" + item.id}
                />
            </div>

        );
        
        return (
            <div className="libraryContentWrapper">
                {films}
            </div>
        )
    }
}

Answer 1

[0xD34F]

Добавьте в LibraryContent:

componentDidUpdate(prevProps) {
  if (prevProps.url !== this.props.url) {
    this.getData();
  }
}

Answer 2

[Максим]

LibraryContent должен перерисовываться, так как вы обновляете state родителя, да и он еще до кучи получает новое значение. Просто обязан.

Проверьте, что в нем нет shouldComponentUpdate, или чего-то, что может мешать обновлению (приложите код компонента).

Comments

[fOrZe0]

shouldComponentUpdate отсутствует. Код компонента приложил к вопросу.