当在BrowserRouter组件中更新道具时，未调用react-router Route组件构造函数

Question

我有一个React应用。 我正在使用react和react-router 。 这是沙盒链接 。

我有一个像这样的App.js文件：

import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';

import Items from './Items';

class App extends Component {
  constructor(props) {
    super(props);

    this.state = {
      items: []
    }
  }

  componentDidMount() {
    this.setState({ items: ['a', 'b', 'c'] });
  }

  render() {
    const { items } = this.state;

    return (
      <BrowserRouter>
        <div>
          <Route exact path="/" render={(props) => <Items {...props} items={items} />} />
        </div>
      </BrowserRouter>
    )
  }
}

export default App;

在此文件的componentDidMount ，我从API获取数据，然后将其传递给Items组件。 当然，在初始页面加载时， items将是一个空数组，然后最终将具有内容。

在我的Items.js文件中，我有：

import React, { Component } from 'react';

class Items extends Component {
  constructor(props) {
    super(props);

    this.items = this.props.items;
  }

  render() {
    return (
      <div>
        {this.items.length}
      </div>
    )
  }
}

export default Items;

如您所见， this.items是从道具中检索的。 同样，在初始页面加载时，这是一个空数组。 但之后componentDidMount火灾App.js ，在构造函数中Items.js 不会触发，所以this.items永远不会再填充的物品。

我该如何在Items.js触发构造Items.js ？ 我知道这是一个简单的示例，因此可以从技术上通过简单地访问render方法中的props来解决，但是我确实需要触发构造函数，因为在我的实际应用中，我的逻辑更加复杂。

Answer 1

您可以直接在Items的render方法中使用this.props提取所需的数据。

 class Items extends Component { constructor(props) { super(props); } render() { const { items } = this.props; return ( <div> {items.length} </div> ) } } 

Answer 2

由于组件的构造函数仅被调用一次，因此我将依赖道具的逻辑移至父组件。