在重新发布之前，componentDidUpdate不起作用

Question

componentDidUpdate 在呈现之前未触发

  

我尝试了以下生命周期方法，但是任何方法都有效：

     

  

1. UNSAFE_componentWillUpdate（）

  

2. UNSAFE_componentWillReceiveProps（）

  

调试器和控制台均未达到该行。在docs中，据说 componentDidUpdate（）在 render（）， render 被处理之前就被触发了

class FeatureTable extends Component {
  constructor(props) {
    ...
  }

  fetch_columns(y_columns) {
    const url = new URL("GEO/" + this.gse + "/y_columns", this.baseUrl);
    this.setState({ loading: true, features: [], selectedFeatures: [] });
    fetch(url.toString(), {
      method: "POST",
      body: JSON.stringify({ columns: y_columns })
    })
      .then(res => res.json())
      .then(res => {
        this.setState({ data: res.data, loading: false });
      });
  }

  componentDidUpdate(prevProps) {
    if (this.props.y_columns !== prevProps.y_columns) {
      this.fetch_columns(this.props.y_columns);
    }
  }

  onSelectedFeatures(event) {
    this.setState({ [event.target.id]: event.target.selected });
  }

  onNewFeatures(features) {
    this.setState({
      features: features
    });
  }

  onCheckedFeature(feature, checked) {
    ...
  }

  render() {
    const loader = this.state.loading && (
      <Box>
        <Box boxShadow={3} height={600} marginTop={2} overflow="scroll">
          <Box marginY={15}>
            <CircularProgress size={150} />
          </Box>
        </Box>
      </Box>
    );
    const insider = (
      <Grid container>
        <Grid item xs={8}>
          {!this.state.data || !Object.keys(this.state.data).length || (
            <InsideTable
              data={this.state.data}
              loading={this.state.loading}
              onNewFeatures={this.onNewFeatures}
            />
          )}
        </Grid>
        <Grid item xs={4}>
          {
            <FeatureSelection
              features={this.state.features}
              onCheckedFeature={this.onCheckedFeature}
            />
          }
        </Grid>
      </Grid>
    );
    return (
      <Box>
        <Box boxShadow={3} height={600} marginTop={2} overflow="scroll">
          {loader || insider}
        </Box>
        <Box textAlign="right" margin={2} marginRight={10}>
          {this.state.selectedFeatures &&
            this.state.selectedFeatures.length > 1 && (
              <Link
                to={{
                  pathname: "/algorithms",
                  state: {
                    gse: this.gse,
                    baseUrl: this.baseUrl,
                    y_columns: this.props.y_columns,
                    selectedFeatures: this.state.selectedFeatures
                  }
                }}
              >
                <Button color="primary" variant="contained">
                  Next
                </Button>
              </Link>
            )}
        </Box>
      </Box>
    );
  }
}

class InsideTable extends Component {
  constructor(props) {
    super(props);
    this.onNewFeatures = props.onNewFeatures;
  }

  componentDidUpdate(prevProps, prevState) {
    console.log("updating" + prevProps);
    if (this.props.data !== prevProps.data) {
      var features = Object.keys(this.props.data);
      var transform = x => Object.values(this.props.data[x]);
      features = new Set(features.map(transform.bind(this)).flat());
      this.onNewFeatures([...features]);
    }
  }

  render() {
    const data = this.props.data;
    const features = Object.keys(data);
    const individuals = Object.keys(data[features[0]]);
    console.log("rendered");
    return (
      <Table>
        <TableHead>
          <TableRow key={"characteristics"}>
            <TableCell key={"individual"}>Individual</TableCell>
            {features.map(x => (
              <TableCell key="feature">{x}</TableCell>
            ))}
          </TableRow>
        </TableHead>
        <TableBody>
          {individuals.map(GSM => (
            <TableRow key={GSM}>
              <TableCell key={GSM}>{GSM}</TableCell>
              {features.map(feature => (
                <TableCell key={GSM + data[feature][GSM]}>
                  {data[feature][GSM]}
                </TableCell>
              ))}
            </TableRow>
          ))}
        </TableBody>
      </Table>
    );
  }
}

export default FeatureTable;

控制台日志上的结果仅为：呈现。

我希望：渲染更新后的{object}。

Answer 1

这是因为最初的渲染。

class InsideTable extends Component{
...
componentDidMount() {
    if (this.data) {
      ...
    }
  }
}

解决问题。