Реактивный маршрутизатор компонента Route не вызывается при обновлении реквизитов в компоненте BrowserRouter. - PullRequest
Новая
       10

Реактивный маршрутизатор компонента Route не вызывается при обновлении реквизитов в компоненте BrowserRouter.

0 голосов
/ 13 октября 2018

У меня есть приложение 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?Я знаю, что это простой пример, и, следовательно, технически может быть решен простым доступом к props в методе render, но мне действительно нужен конструктор для запуска, потому что в моем реальном приложении у меня есть более сложная логика.

Ответы [ 2 ]

0 голосов
/ 14 октября 2018

Поскольку конструктор компонента вызывается только один раз, я вместо этого перенесу логику, которая опирается на подпорки, на родительский компонент.

0 голосов
/ 14 октября 2018

Вы можете использовать this.props непосредственно в методе рендеринга Items, чтобы извлечь нужные данные. 

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

  render() {
    const { items } = this.props;
    return (
      <div>
        {items.length}
      </div>
    )
  }
}
...