Question

您好，尝试在更改select选项的值后刷新图，但它显示了第一个图，当我更改选择选项时，状态已更改，但图没有更改，我认为问题出在生命周期组件中状态更改没有更改，只发生了一次，我该如何解决并感谢您

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import Select from "react-select";
import Graph from "../graph/Graph";
class Home extends Component {
  state = {
    selectedOption: null
  };

  handleChange = selectedOption => {
    this.setState({ selectedOption });

    console.log(`Option selected:`, selectedOption);
  };

  render() {
    const { user } = this.props.auth;
    const { organization } = user;
    console.log(organization);
    //const organization = user.organization;
    console.log(user);
    //let organization = user.organization[0];
    const options = organization.map(org => ({
      value: org.conceptPrefix,
      label: org.name
    }));
    const { selectedOption } = this.state;

    let graphObject;
    if (selectedOption == null) {
      graphObject = <h4>Choose Organization</h4>;
    } else {
      graphObject = (
        <div>
          <Graph org={this.state.selectedOption.value} />
        </div>
      );
    }

    return (
      <div>
        <Select
          value={selectedOption}
          onChange={this.handleChange}
          options={options}
        />
        {graphObject}
      </div>
    );
  }
}
Home.propTypes = {
  auth: PropTypes.object.isRequired
};

const mapStateToProps = state => ({
  auth: state.auth,
  graph: state.graph
});

export default connect(
  mapStateToProps,
  {}
)(Home);

import React, { Component } from "react";
import PropTypes from "prop-types";
import { connect } from "react-redux";
import { graphGet } from "../../actions/graphActions";
import GraphImp from "./GraphImp";

class Graph extends Component {
  constructor(props) {
    super(props);
    this.state = {
      org: props.org
    };
  }
  componentWillReceiveProps(nextProps) {
    if (nextProps.errors) {
      this.setState({ errors: nextProps.errors });
    }
  }

  componentDidMount() {
    this.props.graphGet(this.props.org);
  }

  render() {
    // {this.props.graph.graph && this.state.formSubmitted
    //   ? this.createList()
    //   : "wait Graph"}
    const { graph, loading } = this.props.graph;
    let graphContent;
    if (graph == null || loading) {
      graphContent = <h4>Loading ...</h4>;
    } else {
      graphContent = <GraphImp grapheData={graph} />;
    }
    return <div>{graphContent}</div>;
  }
}
Graph.prototypes = {
  graphGet: PropTypes.func.isRequired,
  auth: PropTypes.object.isRequired,
  errors: PropTypes.object.isRequired,
  graph: PropTypes.object.isRequired
};
const mapStateToProps = state => ({
  auth: state.auth,
  graph: state.graph,
  errors: state.errors
});
export default connect(
  mapStateToProps,
  { graphGet }
)(Graph);

Answer 1

有两种方法可以实现您的目标。

第一个选择：在图形中实现componentDidUpdate

componentDidUpdate(prevProps) {
   if(prevProps.org !== this.props.org) {
     this.setState({ org: this.props.org });
     this.props.graphGet(this.props.org);
   }
}

第二个选项：通过更改键（确保键不是对象/数组）来更改选项时，强制做出反应以完全重新安装和渲染图形。

<Graph key={this.state.selectedOption.value} org={this.state.selectedOption.value} />

状态更改后父组件中的子组件重新呈现

1 个答案: