Question

这里有些困惑。我有一个App组件，该组件执行get API请求以用属性卡填充页面。我的属性组件呈现了一个侧边栏以过滤这些卡片。侧边栏中的链接可以进行正确的API调用，并获得正确的响应-但是该响应不会导致App组件以较少的属性重新呈现。

我想我需要在App中使用ComponentDidUpdate方法，或者在“属性”中扩展ComponentDidUpdate方法，但是我不确定是哪个。有人可以指出我正确的方向吗？

应用组件

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请求上移到父组件的内部是一个好主意，因此，“属性”组件变为“哑”组件，仅根据传递的数据呈现ui。这样，您不必维护多个状态。

在这种情况下，将ComponentDidUpdate（）移至“ App”组件也绝对有意义。

在子组件API得到请求后重新渲染App组件？

1 个答案: