Реагируйте, как вызывать componentDidMount каждый раз при переключении между ListItem

Question

При инициализации компонента виджета, который загружает различные диаграммы, он работает должным образом, но при переключении на другой ListItem, componentDidMount не загружается при переключении на другой элемент. Мне нужно загрузить его, потому что он получает необходимые данные для него. Но дело в том, что когда я переключаюсь между ListItem не инициализировал componentDidMount

DashboardSidebar.jsx

class DashboardSidebar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      tabLocation: this.props.tabLocation
    };
    this.onChange = this.onChange.bind(this);
  }
  onChange(event) {
    this.setState({
      tabLocation: event.target.value
    });
  }
  render() {
    const { classes } = this.props;
    const { path } = this.props.match;
    const { reports = [], sites = [] } = this.props;

    let fromFilterString = "-"
    let toFilterString = "-"

    return (
      <Drawer
        className={classes.drawer}
        variant="permanent"
        classes={{
          paper: classes.drawerPaper,
        }}>
        <div>
          <List>
            {reports.map((report) => (
              <ListItem 
              onClick={this.onChange} button key={report.id}>
                <ListItemIcon>
                  <DashboardIcon />
                </ListItemIcon>
                <ListItemText
                  disableTypography
                  primary={
                    <Typography type="body2">
                      <Link to={`${path}/${report.slug}`} style={{ color: "#000" }}>
                        {report.name}
                      </Link>
                    </Typography>
                  }
                />
              </ListItem>
            ))}
          </List>
        </div>
        <Divider light />
      </Drawer>
    )
  }
}

Этот компонент, кажется, работает правильно, но при нажатии на другой ListItem запустить componentDidUpdate которые не получают необходимые данные для диаграмм. Также я узнаю, что когда я изменил в компоненте MainDashboard, key={i} на key={l.id} начинает нажимать componentDidMount, но виджет не загружается, но из консоли я вижу, что он нажимает componentDidMount и выбирает данные, которые я console.log().

MainDashboard.jsx

class MainDashboard extends Component {
  componentDidUpdate(prevProps) {
    if (this.props.match.params.report === prevProps.match.params.report) {
      return true;
    }
    let widgets = {};
    let data = {};
    let layout = {};
    fetch(...)
      .then(response => response.json())
      .then(data => {
        ...
        this.setState({dashboard: data, isLoading: false, layouts: layout });
      })
  }

  componentDidMount() {
    this.setState({ mounted: true, isLoading: true });
    let widgets = {};
    let data = {};
    let layout = {};

    fetch(...
    })
      .then(response => response.json())
      .then(data => {
          ...
        this.setState({dashboard: data, isLoading: false, layouts: layout });
      })
  }

  sortWidgets(widgets) {
    ...
    return widgets;
  }

  generateDOM() {
    return _.map(this.state.dashboard.widgets, function(l, i) {
        ....
      return (
        <div key={i}>
            <ChartWidget
              visualization={l.visualization}
              name={l.visualization.name}
        </div>
      );
    }.bind(this));
  }
  render() {

    return (
      ...
    );
  }
}

Answer 1

Итак, componentDidMount на самом деле бьют, но ничего не происходит с точки зрения обновления данных? в этом случае ваш компонент загружается / монтируется первым, и все, что должно произойти, не вызывает повторного рендеринга, я хотел бы использовать другой метод жизненного цикла, чтобы убедиться, что ваши данные обновляются.

Я не конечно, если вы работаете на устаревшей системе, но если обновление до функциональных компонентов является опцией, я бы рекомендовал использовать метод жизненного цикла useEffect, поскольку он заменяет многие методы жизненного цикла, такие как componentDidMount, componentDidUpdate и небезопасные componentWillUnmount и сделает вашу жизнь намного проще и эффективнее.

Answer 2

У вас есть три варианта:
1 - использовать другой жизненный цикл, такой как componentDidUpdate, извлекать новые данные, если есть определенные изменения в реквизите или состоянии
2 - использовать новый Key, если вы используйте новый ключ для компонента, он вызовет componentDidMount, потому что компонент снова отображается как новый объект
3- Используйте реаги.ref
Я думаю, вы должны прочитать на все три варианта и выберите тот, который подойдет вам лучше всего.

Answer 3

componentDidMount выполняется только тогда, когда компонент смонтирован. Обновление состояния в DashboardSidebar не приведет к перемонтированию BaseDashboard, поэтому componentDidMount не будет повторно выполнено для BaseDashboard.

Вы пытались извлечь данные в onChange вместо этого обработчик события (для переключения на другой ListItem)?