Question

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

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

这是一个主要模块

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方法调用。

感谢任何帮助。

Answer 1

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

现在要解决此问题，我们可以使用getDerivedStateFromProps生命周期方法，但更好的解决方案是除非确实需要，否则不要将状态与道具同步。只需在render方法中使用道具即可。

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

我现在已经使您的CustomGUIChart组件变得非常简单，您甚至可以使其成为功能组件

希望它会有所帮助：）

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

1 个答案: