Javascript 重新渲染过多，试图在React中更改svg，如何修复此问题

我试图根据温度来更改SVG的颜色，但我不断收到过多的重新渲染错误。我想知道什么是正确的方法来让这个代码工作，我只是不明白它

我的代码（我试图先更改id名称，看看它是否有效）

导出默认函数Svg（{data}）{
const[colorTemp，setColorTemp]=useState（'red'）；
控制台日志（数据）；
如果（数据>20）{
setColorTemp（“蓝色”）；
}
返回(
在这种情况下，您不希望使用状态，因为每次更改状态时，它都会触发重新渲染。因为该值仅基于传递的
数据
属性，请执行如下简单检查：

导出默认函数Svg（{data}）{
设colorTemp='red'；
如果（数据>20）{
colorTemp='蓝色'
}
返回(
尝试使用
useffect
hook，并将其设置为在
数据更改时生效：

    export default function Svg({ data }) {
      const [colorTemp, setColorTemp] = useState('red');
      console.log(data);
    
    useEffect(() => {
      data > 20 setColorTemp('blue') : setColorTemp('red')
     }, [data])
        
      return (
        <svg
          id={colorTemp}
          enable-background="new 0 0 379.181 379.181"
          height="512"
          viewBox="0 0 379.181 379.181" 

导出默认函数Svg（{data}）{
const[colorTemp，setColorTemp]=useState（'red'）；
控制台日志（数据）；
useffect（（）=>{
数据>20 setColorTemp（'blue'）：setColorTemp（'red'））
}，[数据]）
返回(
    export default function Svg({ data }) {
      const [colorTemp, setColorTemp] = useState('red');
      console.log(data);
    
    useEffect(() => {
      data > 20 setColorTemp('blue') : setColorTemp('red')
     }, [data])
        
      return (
        <svg
          id={colorTemp}
          enable-background="new 0 0 379.181 379.181"
          height="512"
          viewBox="0 0 379.181 379.181"