javascript - React如何在ListItem之间每次切换时调用componentDidMount

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

您有三个选择:
1-使用另一个生命周期，例如componentDidUpdate，如果 props 或 state 有特定变化，则获取新数据
2- 使用新的Key，如果在组件上使用新的key，会触发componentDidMount，因为组件会再次渲染为新的实体
3- 使用react.ref
我认为您应该阅读所有三个选择，然后选择最适合您的一个。