如何从 highcharts 中的 setInterval 函数获取 react useState 钩子的更新值？

Question

import Error from 'next/error'
import React, { useState, useEffect } from 'react'
import Highcharts from 'highcharts'
import HighchartsReact from 'highcharts-react-official'

function id() {

    const [count, setCount] = useState()

    const options = {

        chart: {
            renderTo: 'chart',
            type: 'spline',
            zoomType: 'x',
            backgroundColor: 'transparent',
            plotBorderColor: 'transparent',
            events: {
                load: function () {
                    const chart = this
                    setInterval(function () {
                        chart.series[0].addPoint([new Date().getTime(), count], true)
                    }, 1000);
                }
            }
        },
        title: {
            text: 'Chart'
        },
        xAxis: {
            type: 'datetime',
            tickPixelInterval: 200,
            gridLineColor: "red",
            labels: {
                style: {
                    color: "red"
                }
            },
            lineColor: "red",
            minorGridLineColor: 'red',
            tickColor: "red",
            title: {
                style: {
                    color: "red"
                }
            }
        },
        yAxis: {
            title: {
                text: ''
            },
            gridLineColor: "red",
            labels: {
                style: {
                    color: "red"
                }
            },
            lineColor: "red",
            minorGridLineColor: 'red',
            tickColor: "red"
        },
        credits: {
            enabled: false
        },

        series: [{
            name: "Random Number"
        }]
    }

    useEffect(() => {

        const interval = setInterval(async () => {

            const res = await fetch("https://socialcounts.herokuapp.com/https://socialcounts.in/api/random-num")

            const data = await res.json()

            setCount(data["num"])
        }, 1000);

        return () => clearInterval(interval);

    }, [])

    return (<center>
        <h1>{count}</h1>
        <p></p>
        <HighchartsReact highcharts={Highcharts} options={options} />
    </center>)
}

export default id

你好，我正在做下一个 js 项目。

我需要在我的项目中添加 highcharts 图。
我想从 api 获取数据并将其推送到 setCount 挂钩。但是，我遇到了问题.. 每当我想在 chart.series[0].addPoint([new Date().getTime(), count],true) 中获取 count 挂钩的值但我无法从我的挂钩中获取更新的值时。我无法从

获取 const [count, setCount] = useState() 变量的更新值

events: {
    load: function () {
        const chart = this
        setInterval(function () {
            chart.series[0].addPoint([new Date().getTime(), count], true)
        }, 1000);
    }
}

我想，我遇到这个问题是因为 setInterval 函数.. 但是 setInterval 很重要，否则我怎么能按间隔将数据推送到 chart.series[0].addPoint。
我如何在每个 setInterval 中获取更新值。

请帮帮我..

Answer 1

请查看关于 useState 中值的精彩解释：

The value might be different between 2 renders, but remains a constant inside the render itself and inside any closures (functions that live longer even after render is finished, e.g. useEffect, event handlers, inside any Promise or setTimeout).

解决方案是在您接收数据的同一函数中使用 addPoint 方法。

function App() {
  const [count, setCount] = useState();
  const chartComponent = useRef(null);
  const [options] = useState({...});

  useEffect(() => {
    const interval = setInterval(async () => {
      const res = await fetch(
        "https://socialcounts.herokuapp.com/https://socialcounts.in/api/random-num"
      );

      const data = await res.json();
      if (chartComponent.current) {
        chartComponent.current.chart.series[0].addPoint(
          [new Date().getTime(), data["num"]],
          true
        );
      }

      setCount(data["num"]);
    }, 2000);

    return () => clearInterval(interval);
  }, []);

  return (
    <center>
      <h1>{count}</h1>
      <HighchartsReact
        ref={chartComponent}
        highcharts={Highcharts}
        options={options}
      />
    </center>
  );
}

现场演示： https://codesandbox.io/s/highcharts-react-demo-forked-x9xi9?file=/demo.jsx

如何从 highcharts 中的 setInterval 函数获取 react useState 钩子的更新值？

how to get updated value of react useState hook from setInterval function in highcharts?

javascript

setinterval

highcharts

reactjs

next.js