Как я могу перезагрузить график после обновления данных? - PullRequest
Новая
       18

Как я могу перезагрузить график после обновления данных?

0 голосов
/ 15 апреля 2020

У меня есть страница с выпадающим меню, где я могу выбрать опцию (источник данных) и загрузить пару графиков. После этого при выборе другого источника данных диаграммы также должны обновляться.

При выборе другого источника данных диаграмма не обновляется. Я знаю, что моя переменная корректно обновляется, и что мой вызов диаграммы использует эту же переменную.

Здесь основной модуль 

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

Этот является "рабочим" "demo

Я проверил этот вопрос, мой HighchartsReact уже установлен с allowChartUpdate.

Также я проверил это вопрос, там есть несколько решений. Но я не мог реализовать ни один из них. Поскольку все они получают доступ к графику через JQuery, и я не знаю альтернативы для случая react.

И этого сообщения на форуме, я сталкиваюсь с той же проблемой, что и выше , это JQuery вызов метода.

Ценю любую помощь.

1 Ответ

2 голосов
/ 15 апреля 2020

Эй, проблема в том, что вы пытаетесь синхронизировать c ваши реквизиты с состоянием вашего CustomGUIChart компонента, а затем визуализировать пользовательский интерфейс на основе этого состояния. Теперь проблема заключается в том, что, поскольку конструктор запускается только в первый раз, когда реквизиты устанавливаются в состояние, и диаграмма отображается правильно, но при изменении реквизитов ваше состояние не может знать, что диаграмма не меняется.

Теперь, чтобы решить эту проблему, мы можем использовать getDerivedStateFromProps метод жизненного цикла, но вместо этого лучшим решением будет не синхронизировать c ваше состояние с вашими реквизитами, если только вам это не нужно. Просто используйте ваши реквизиты в методе рендеринга.

Вот ваш код, работающий как положено: https://codesandbox.io/s/update-data-source-8g27i?file= / src / CustomGUIChart. js

Я сделал Ваш CustomGUIChart компонент теперь действительно стал проще, вы даже можете сделать его функциональным

Надеюсь, это поможет:)

...