Question

在点击子按钮时，我在渲染一个反应父元素时遇到了一些问题，我很确定我已经完成了所有事情，以便为我的渲染提供良好的上下文，但它仍然无法正常工作。
我正在制作的过程是：从API获取数据，然后在chartjs中渲染数据，当我点击我的子按钮时，它设置了一个反映数据时使用的范围（日，周，月，季）。 / p>

这是我的父组件：

class ExecutiveCharts extends Component {
  constructor(props) {
    super(props);
    this.state = {
      activityEngagementData: {}
    };
    this.getChartsData = this.getChartsData.bind(this);
  }

  componentWillMount() {
    this.getChartsData();
  }

  getChartsData(scope) {
    if (scope) {
      fetch("/state", {
        method: "POST",
        headers: {
          "Content-type": "application/x-www-form-urlencoded; charset=UTF-8"
        },
        body: 'userParams={"scope":"' + scope + '"}',
        credentials: "same-origin"
      });
    }

    fetch("/stats/executive/totals", {
      method: "GET",
      headers: {
        Accept: "application/json"
      },
      credentials: "same-origin"
    })
      .then(response => response.json())
      .then(data => {
        // ...
        this.setState({
          activityEngagementData: {
            // ...
          }
        });
      });
  }

  render() {
    if (!$.isEmptyObject(this.state.activityEngagementData)) {
      return [
        <div key="1" className="col-12 my-3 text-right">
          <ScopeButtons getChartsData={this.getChartsData.bind(this)} />
        </div>,
        <div key="2" className="col-12 col-sm-6 mb-3">
          <LineChart
            title="Activity & Engagement scores inside your community"
            chartData={this.state.activityEngagementData}
          />
        </div>
      ];
    } else {
      return [
        <div key="1" className="col-12 my-3 text-center">
          DATA IS LOADING
        </div>
      ];
    }
  }
}

我的按钮元素：

class ScopeButtons extends Component {
  constructor(props) {
    super(props);
  }

  render() {
    return [
      <Button
        key="1"
        className="ml-4"
        variant="raised"
        color="default"
        onClick={() => this.props.getChartsData("day")}
      >
        Day
      </Button>,
      <Button
        key="2"
        className="ml-4"
        variant="raised"
        color="default"
        onClick={() => this.props.getChartsData("week")}
      >
        Week
      </Button>,
      <Button
        key="3"
        className="ml-4"
        variant="raised"
        color="default"
        onClick={() => this.props.getChartsData("month")}
      >
        Month
      </Button>,
      <Button
        key="4"
        className="mx-4"
        variant="raised"
        color="default"
        onClick={() => this.props.getChartsData("quarter")}
      >
        Quarter
      </Button>
    ];
  }
}

这是我的图表组件：

class LineChart extends Component {
  constructor(props) {
    super(props);
    this.state = {
      chartData: props.chartData
    };
  }

  render() {
    return (
      <Line
        data={this.state.chartData}
        options={{
          responsive: true,
          title: {
            display: "true",
            text: this.props.title,
            fontSize: 18
          },
          tooltips: {
            mode: "label",
            intersect: false
          },
          hover: {
            mode: "label"
          },
          legend: {
            display: "true",
            position: "bottom"
          },
          scales: {
            yAxes: [
              {
                ticks: {
                  beginAtZero: true
                }
              }
            ]
          }
        }}
      />
    );
  }
}

我在那里转身，提前谢谢你！

Answer 1

在<LineChart/>组件中，您将状态设置为构造函数中的props。为什么？这意味着只有在安装组件时才会考虑其道具。当<LineChart/>组件获得新的道具时，它将重新渲染，但它不会再次调用其构造函数。因此状态不会改变，因此<Line/>将不会获得新数据。不要将状态设置为等于构造函数中的props并更改

<Line data={this.state.chartData} ... />

到

<Line data={this.props.chartData} ... />

这样，当新数据传递给组件时，它将使用该数据重新呈现<Line/>组件。

React setState不重新呈现元素

1 个答案: