Reactjs 反应设置状态不'；重新渲染元素

当单击子按钮时，我在重新呈现react父元素时遇到一些问题，我非常确定我已经尽了一切努力为我的重新呈现提供了良好的上下文，但它仍然不起作用。
我正在做的过程是：从API获取数据，然后在chartjs中呈现，当我单击我的子按钮时，它将设置一个范围（日、周、月、季度），用于引用数据

这是我的父组件：

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>
      ];
    }
  }
}

类ExecutiveCharts扩展组件{
建造师（道具）{
超级（道具）；
此.state={
activityEngagementData:{}
};
this.getChartsData=this.getChartsData.bind（this）；
}
组件willmount（）{
这个.getChartsData（）；
}
getChartsData（范围）{
如果（范围）{
获取（“/state”{
方法：“张贴”，
标题：{
“内容类型”：“application/x-www-form-urlencoded；charset=UTF-8”
},
正文：'userParams={“scope”：“'+scope+'“}”，
凭据：“相同来源”
});
}
获取（“/stats/executive/totals”{
方法：“获取”，
标题：{
接受：“应用程序/json”
},
凭据：“相同来源”
})
.then（response=>response.json（））
。然后（数据=>{
// ...
这是我的国家({
activityEngagementData：{
// ...
}
});
});
}
render（）{
if（！$.isEmptyObject（this.state.activityEngagementData））{
返回[
,
];
}否则{
返回[
正在加载数据
];
}
}
}

我的按钮元素：

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>
    ];
  }
}

类范围按钮扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
返回[
this.props.getChartsData（“day”）}
>
白天
,
this.props.getChartsData（“周”）}
>
周
,
this.props.getChartsData（“月”）}
>
月
,
this.props.getChartsData（“季度”）}
>
一刻钟
];
}
}

这是我的图表组件：

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
                }
              }
            ]
          }
        }}
      />
    );
  }
}

类折线图扩展组件{
建造师（道具）{
超级（道具）；
此.state={
chartData:props.chartData
};
}
render（）{
返回(
);
}
}

我在那里转过去，先谢谢你

在

组件中，将状态设置为与构造函数中的道具相同。为什么？这意味着只有在安装组件时，才会考虑其道具。当

组件获得新道具时，它将重新渲染，但不会再次调用其构造函数。因此状态不会改变，因此

不会获得新数据。不要将状态设置为构造函数中的道具并更改

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

到

这样，当新数据传递到组件时，它将使用该数据重新呈现

组件。

在

组件中，将状态设置为与构造函数中的道具相同。为什么？这意味着只有在安装组件时，才会考虑其道具。当

组件获得新道具时，它将重新渲染，但不会再次调用其构造函数。因此状态不会改变，因此

不会获得新数据。不要将状态设置为构造函数中的道具并更改

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

到

---

这样，当新数据传递到组件时，它将使用该数据重新呈现

组件。

非常感谢，我不记得重新呈现时构造函数没有再次调用！我正在考虑使用fetch async/sync的问题，但您解决了我的问题，再次感谢您！别担心。如果解决了您的问题，请将答案标记为正确，这样问题就可以解决：）非常感谢您，我不记得重新呈现时构造函数没有再次调用！我正在考虑使用fetch async/sync的问题，但您解决了我的问题，再次感谢您！别担心。如果解决了您的问题，请将答案标记为正确，这样问题就可以解决：）在

getChartsData

中可能存在竞争条件，因为您不必等待第一个

fetch（）

完成后再发射另一个。我做了一次回调，以确保第一个

fetch（）

完成，谢谢！

getChartsData

中可能存在争用情况，因为您不必等到第一个

fetch（）

完成后再发射另一个。我进行了回调以确保第一个

fetch（）

完成，谢谢！