狀態更改后父組件中的子組件重新呈現

Question

您好正在嘗試在更改選擇選項的值后刷新圖，但它顯示了第一個圖，當我更改選擇選項時，狀態已更改，但圖未更改，我認為問題出在狀態更改時生命周期組件中沒改變，只有一次，我該如何解決它，謝謝

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

有兩種方法可以實現您的目標。

第一種選擇：在Graph中實現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} />