Перерисовать компонент приложения после того, как дочерний компонент API получит запрос?

Question

Немного смущен здесь. У меня есть компонент App, который выполняет API-запрос get для заполнения страницы карточками свойств. Компонент My Properties отображает боковую панель для фильтрации этих карт. Ссылки на этой боковой панели делают правильные вызовы API и получают правильный ответ - но этот ответ не вызывает повторного рендеринга компонента App с меньшим количеством свойств.

Я предполагаю, что мне нужен метод ComponentDidUpdate в App, или чтобы развернуть метод ComponentDidUpdate в Properties, но я не уверен, какой именно. Может ли кто-нибудь указать мне правильное направление?

Компонент приложения

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      properties: [],
    };
  }

  componentDidMount() {
    Axios.get('http://localhost:3000/api/v1/PropertyListing')
      .then((response) => {
        this.setState({
          properties: response.data,
        });
      });
  }

  render() {
    return (
      <div className="navigation">
        <NavBar />
        <Switch>
          <Route exact path="/" component={Properties} />
          <Route exact path="/add-property" component={AddProperty} />
        </Switch>
        <PropertyCards
          properties={this.state.properties}
        />
      </div>
    );
  }
}

Свойства компонента

class Properties extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      properties: [],
    };
  }

  componentDidUpdate(prevProps) {
    const { search } = this.props.location;

    if (prevProps.location.search !== search) {
      Axios.get(`http://localhost:3000/api/v1/PropertyListing${search}`)
        .then(({ data: properties }) => this.setState({ properties }))
        .catch(err => console.error(err));
    }
  }

  render() {
    return (
      <div className="sidebar">
        <h4>Filter by city</h4>
        <div className="filters">
          <Link className="filter" to={'/?query={"city":"Manchester"}'}>Manchester</Link>
          <Link className="filter" to={'/?query={"city":"Leeds"}'}>Leeds</Link>
          <Link className="filter" to={'/?query={"city":"Sheffield"}'}>Sheffield</Link>
          <Link className="filter" to={'/?query={"city":"Liverpool"}'}>Liverpool</Link>
        </div>
      </div>
    );
  }
}

Answer 1

В целом, было бы неплохо перенести второй запрос API в ваш родительский компонент, поэтому компонент «Свойства» становится «тупым» компонентом, который отображает пользовательский интерфейс только в соответствии с переданными данными.Таким образом, вам не нужно поддерживать несколько состояний.

В этом контексте, безусловно, имеет смысл переместить ComponentDidUpdate () в ваш компонент App.