如何在数据更新后重新加载图表？答案

【问题标题】：How can I reload chart following data update?如何在数据更新后重新加载图表？
【发布时间】：2020-04-15 16:56:42
【问题描述】：

我有一个带有下拉菜单的页面，我可以在其中选择一个选项（数据源）并加载几个图表。之后，如果我选择其他数据源图表也应该更新。

当我选择其他数据源时图表没有更新。我知道我的变量正在正确更新，而且我的图表调用正在使用同一个变量。

这里是主模块

function Content() {
  const [chartData, setChartData] = useState(
    mockData.map(series => ({
      ...series,
      data: series.data.map(point => {
        const dateArr = point[0].split("-");
        return [Date.UTC(dateArr[0], dateArr[1], dateArr[2]), point[1] * 100];
      })
    }))
  );
  const handleSelectedOptionChange = evt => {
    const selectedOption = evt.target.value;
    if (selectedOption === 1) {
      setChartData(() => {
        mockData.map(series => ({
          ...series,
          data: series.data.map(point => {
            const dateArr = point[0].split("-");
            return [
              Date.UTC(dateArr[0], dateArr[1], dateArr[2]),
              point[1] * 100
            ];
          })
        }));
      });
    }
    if (selectedOption === 2) {
      setChartData(() => {
        mockData2.map(series => ({
          ...series,
          data: series.data.map(point => {
            const dateArr = point[0].split("-");
            return [
              Date.UTC(dateArr[0], dateArr[1], dateArr[2]),
              point[1] * 100
            ];
          })
        }));
      });
    }
  };
  return (
    <>
      <FormControl>
        <InputLabel htmlFor="grouped-native-select">Choose</InputLabel>
        <Select
          id="selector"
          name="selector"
          onChange={handleSelectedOptionChange}
          defaultValue={1}
        >
          <option value={1}>First</option>
          <option value={2}>Second</option>
        </Select>
      </FormControl>
      <Grid item xs={12} sm={12}>
        <Paper>
          <CustomGUIChart data={chartData} />
        </Paper>
      </Grid>
    </>
  );
}

This 是一个“工作”演示

我检查了this 的问题，我的HighchartsReact 已经设置为allowChartUpdate。

我还检查了this 问题，那里有一些解决方案。但我无法实现其中任何一个。因为他们都通过JQuery 访问图表，而我不知道react 案例的替代方案。

而this论坛帖子我遇到了和上面一样的问题，这是一个JQuery方法调用。

感谢任何帮助。

【问题讨论】：

您好 Bernardo，如果我的回答对您有所帮助，您可以将其标记为已接受吗？谢谢:)
我正在将您的建议应用于我的真实组件，它有点复杂（参数化）。一旦我得到它的工作，我会将其标记为已接受，以防我有任何后续问题或如果有人提出不同的方法。

标签： javascript reactjs highcharts react-highcharts

【解决方案1】：

嘿，问题是您正在尝试将您的道具与您的 CustomGUIChart 组件的状态同步，然后根据该状态呈现 UI。现在的问题是，由于构造函数仅在第一次将道具设置为状态并且图表正确呈现时运行，但是当道具更改时，您的状态无法知道，因此图表不会更改。

现在要解决这个问题，我们可以使用getDerivedStateFromProps 生命周期方法，但更好的解决方案是不同步你的状态与你的道具，除非你真的必须这样做。只需在 render 方法中使用你的道具。

这是您的代码，按预期工作： https://codesandbox.io/s/update-data-source-8g27i?file=/src/CustomGUIChart.js

我现在已经让你的CustomGUIChart 组件变得非常简单，你甚至可以把它变成一个函数式组件

希望对你有帮助:)

【讨论】：