Question

我有一个React应用。我正在使用react和react-router。 Here's the sandbox link。

我有一个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中触发构造函数？我知道这是一个简单的示例，因此可以从技术上通过在props方法中访问render来解决，但是我确实需要触发构造函数，因为在我的实际应用中，我有更多那里有复杂的逻辑。

Answer 1

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

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

Answer 2

由于只调用一次组件的构造函数，因此我将依赖于props的逻辑移到父组件。

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

2 个答案: