Блог

Главная - Вопросы по программированию - React useState выдает ошибку при наведении курсора мыши на высокие диаграммы

React useState выдает ошибку при наведении курсора мыши на высокие диаграммы

#javascript #reactjs #highcharts #use-state

Вопрос:

У меня есть приложение react typescript с диаграммой highcharts. Я хочу обновить метку «цена» (за пределами highcart) на основе данных, которые я получаю, когда пользователь наводит курсор мыши на часть графика.

Обратный вызов наведения курсора мыши работает нормально, и я могу успешно записать нужные мне данные в консоль. Но когда я пытаюсь обновить состояние цены с помощью крючка useState для setPrice, я получаю ошибку от highcharts. Если я прокомментирую строку setPrice, ошибок не будет. Есть какие-нибудь мысли?

 Uncaught TypeError: Cannot read properties of null (reading 'yAxis')
    at highstock.src.js:24009
    at Array.forEach (<anonymous>)
    at c.getAnchor (highstock.src.js:23992)
    at c.refresh (highstock.src.js:24517)
    at c.runPointActions (highstock.src.js:27941)
    at c.onContainerMouseMove (highstock.src.js:27502)

Вот несколько псевдокодов о том, как я это реализовал:

 const [price, setPrice] = useState<number>(0)

options = {
  ...
  plotOptions: {
    series: {
      point: {
        events: {
          mouseOver: function(e:any) {
            price = // logic to fetch price based on mouse position 
            console.log(price)   
            setPrice(price)
          }
        }
      }    
    }
  }
}

И html (стилизованные компоненты)

 <Price>{ price }</Price>

Комментарии:

1. Каков результат console.log(price) ?

2. Просто число, например 200. И я заверил, что это номер типа.

3. Мне интересно, не проблема ли это с моими данными. Я попытаюсь повторить это с помощью гораздо более простого набора данных.

Ответ №1:

Данные, вероятно, доступны не сразу, поэтому он возвращает нулевые данные. Однако вы можете установить данные асинхронно, используя задержку setTimeout, например.

 const [price, setPrice] = useState<number>(0)

options = {
  ...
  plotOptions: {
    series: {
      point: {
        events: {
          mouseOver: function(e:any) {
            price = // logic to fetch price based on mouse position 
            console.log(price)   
            setTimeout(() => { // This is where the delay comes in
            setPrice(price)
            }, 0)
          }
        }
      }    
    }
  }
}

Ответ №2:

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

Метки: