Javascript 使用带计时器的挂钩更新React组件时遇到问题

我有一个图表，我试图每秒钟更新一次。在父组件中，我有一个计时器，每秒钟我生成一个随机值，并将其解析为子组件的道具

import './main.css'
import { Graph } from '../../components/graph_recharts'


export const Main = () => {
    const [timer, setTimer] = useState("")
    const [data, setData] = useState(0)
    useEffect(() => {
        let value = 1000
        const create_value = () =>{
            if (positive_trend() || value - generate_random_value() < 0){
                return value+= generate_random_value()
            }
            return value-=generate_random_value() 
        }

        const timer = (mins, secs) => {
                        \\timer code omitted to save space
                        setData(create_value())
                    }, 1000);    

                setTimeout(() => { clearInterval(timerId); setTimer('stop'); }, totalTimer);
            }
            else {
                console.log('error')
            }
        }
        timer(5, 1)

    }, [])


    return (
        <div className='container'>
            <div className='header'>
                <h1>{timer}</h1>
            </div>
            <div>
                <Graph data={data} />
            </div>
            <div className="footer">
                footer
            </div>
        </div>

    );
}

import./main.css'
从“../../components/Graph_recharts”导入{Graph}”
导出常量Main=（）=>{
const[timer，setTimer]=useState（“”）
const[data，setData]=useState（0）
useffect（（）=>{
设值=1000
const create_value=（）=>{
如果（正趋势值-生成随机值（）<0）{
返回值+=生成随机值（）
}
返回值-=生成随机值（）
}
常量计时器=（分钟，秒）=>{
\\省略计时器代码以节省空间
setData（创建_值（））
}, 1000);    
setTimeout（（）=>{clearInterval（timerId）；setTimer（'stop'）；}，totalTimer）；
}
否则{
console.log（'错误'）
}
}
计时器（5，1）
}, [])
返回(
{计时器}
页脚
);
}

在子组件中，我尝试设置数据，并尝试使用useEffect挂钩来帮助我。但是，我得到一个错误，告诉我我正在尝试更新一个未安装的组件。我不知道如何解决这个问题。我的子组件如下所示

import React, { useState,useEffect } from 'react'
import {LineChart, Line, XAxis, YAxis, CartesianGrid, Tooltip, Legend} from 'recharts';


export const Graph = (props)=>{


const [data,setData] = useState([{name:'0', price: props.data}])

  useEffect(() => {
    setData(...data,{name:'0', price: props.data })
    console.log(props.data)
  }, [props.data,data])
    


    return (
        <LineChart 
            width={window.innerWidth*0.9} 
            height={window.innerHeight*0.4} 
            data={data}
            margin={{top: 5, right: 30, left: 20, bottom: 5}}
        >
         <XAxis dataKey="name"/>
         <YAxis/>
         <CartesianGrid strokeDasharray="3 3"/>
         <Tooltip/>
         <Legend />
         <Line type="monotone" dataKey="uv" stroke="#8884d8" activeDot={{r: 8}}/>
        </LineChart>
    );

}

import React，{useState，useffect}来自“React”
从“recharts”导入{LineChart，Line，XAxis，YAxis，CartesianGrid，Tooltip，Legend}；
导出常量图=（道具）=>{
const[data，setData]=useState（[{name:'0'，price:props.data}]）
useffect（（）=>{
setData（…数据，{name:'0'，price:props.data}）
console.log（props.data）
}，[props.data，data]）
返回(
);
}

将setData中解析的数据用方括号括起来，如下所示：

setData([...data,{name:'0', price: props.data }])

---

从useEffect依赖项中删除数据

如果要仅在props.data发生更改时设置数据，则效果当前的工作方式是将本地状态数据作为效果的依赖项，因此将获得无限循环。当props.data更改时，它将设置数据，但会更改数据，以便再次运行效果

请改为执行以下操作：

useEffect(() => {
  setData((data) => [//callback for state setter
    ...data,
    { name: '0', price: props.data },
  ]);
}, [props.data]);//local state data no longer a dependency

---

您能否尝试从useEffect中删除

数据

依赖项，如

useEffect（（）=>{…}[props.data]）

我已经删除了数据依赖项，但仍然存在相同的问题。我相信问题是我的组件在卸载后试图更新，这是我试图阻止的。你能传递错误吗？我刚刚发现了我的错误。我忘了将setData（）中正在解析的内容用方括号括起来。为响应干杯。这将使您进入无限循环，因为您正在设置数据，但数据是效果的依赖项