Question

我有下一个组成部分：

import React, { Component } from "react";
import { connect } from "react-redux";
import Navbar from "../Navbar";
import Modelado from "../app/ModeladoDeDatos";
import Grafica from "./Grafica";
import { Grid, Paper } from "@material-ui/core";
import { borrarConfig } from "../../actions/config.actions";
import history from "../../history";

import "../../static/css/Graficas.css";
import { getMyConnections } from "../../actions/connection.actions";

class Graficas extends Component {
  componentDidMount() {
    this.props.getMyConnections();
  }

  renderGrafica = () => {
    return this.props.conexiones.map(conexion => {
      return Object.values(conexion.configurations).map((config, index) => {
        const modelo = new Modelado(config.result, config.values);
        return (
          <Grid
            key={index}
            item
            xs={6}
            onDoubleClick={() =>
              history.push(`/grafica/${conexion.id}/${config.id}`)
            }
          >
            <Paper>
              <Grafica
                configId={config.id}
                conexionId={conexion.id}
                nombre={config.name}
                modelo={modelo.construirDatos()}
                borrar={this.props.borrarConfig}
                menu={["Añadir al dashboard", "Eliminar"]}
              />
            </Paper>
          </Grid>
        );
      });
    });
  };

  render() {
    return (
      <div>
        <Navbar />
        <Grid container spacing={3} className="graficas">
          {this.renderGrafica()}
        </Grid>
      </div>
    );
  }
}
const mapStateToProps = state => {
  return { conexiones: Object.values(state.conexiones) };
};

export default connect(
  mapStateToProps,
  { borrarConfig, getMyConnections }
)(Graficas);

当我尝试呈现此组件时，在renderGrafica方法之前执行componentDidMount方法，这使我的应用程序失败，因为由于获取而无法从redux存储中获取数据发生在componentDidMount调用中。发生提取的redux操作方法如下：

export const getMyConnections = () => {
  console.log("me activo");
  return async dispatch => {
    const response = await requireAuthActions.get("/db/conexion");
    dispatch({ type: GET_MY_CONNECTIONS, payload: response.data });
  };
};

componentDidMount方法将调用redux操作，该操作是对API的异步调用。

componentDidMount调用是否应在呈现组件之前执行？

Answer 1

否，componentDidMount在首次渲染组件之后运行。 From React's docs：

componentDidMount()在组件安装（插入树中）后立即被调用。需要DOM节点的初始化应在此处进行。如果您需要从远程端点加载数据，那么这是实例化网络请求的好地方。

看看React的文档"The Component Lifecycle"可以了解更多信息。这是安装组件时按顺序调用的函数的列表：

constructor()
static getDerivedStateFromProps()
render()
componentDidMount()

正如文档所说，

componentDidMount()仍然是发出网络请求的最佳位置。因此，如果您需要this.props.getMyConnections()调用中的数据以从renderGrafica渲染组件之前返回，则应在运行函数之前添加一个标志，等待它们可用。

希望对您有帮助。

为什么要在componentDidMount之前执行组件内部的功能？

1 个答案: