Javascript 如何在react中重新呈现更新的值

我试图在固定的时间间隔内无限循环使用彩虹颜色，并在浏览器DOM中更新该颜色

颜色值每半秒更改一次。但它不是在DOM中重新渲染

import React from 'react'

const Rainbow = (WrapedComponent) =>{

        const colors = ['violet', 'indigo', 'blue', 'green', 'yellow', 'orange', 'red'];

        let i=0;
        let newColor;


        setInterval(() => {
            newColor = colors[i];
            if (i === (colors.length - 1)) {
                i = 0;
            } else {
                i++;
            }
        }, 500);


        let newStyle = {
            color: newColor
        }


    return (props) => {
        return (
            <div style={newStyle}>
                <h1>Hello World</h1>
                <WrapedComponent {...props}/>
            </div>
        )
    }
}

export default Rainbow

从“React”导入React
常量彩虹=（包裹组件）=>{
常量颜色=[“紫色”、“靛蓝”、“蓝色”、“绿色”、“黄色”、“橙色”、“红色”]；
设i=0；
让新的颜色；
设置间隔（（）=>{
newColor=colors[i]；
如果（i==（colors.length-1））{
i=0；
}否则{
i++；
}
}, 500);
让newStyle={
颜色：新颜色
}
返回（道具）=>{
返回(
你好，世界
)
}
}
导出默认彩虹

您正在更新

newColor

很好；问题是，

newStyle

（和

newStyle.color

）只分配了一次。虽然

newStyle.color

最初引用了

newColor

的第一个值，但这与

newStyle.color

不断引用

newColor

的未来值不同

只需将超时中的

newColor=colors[i]

更改为

newStyle.color=colors[i]

，即可更新该对象。如果希望将

newStyle

应用于DOM中的某些内容，当然还需要确保代码也已就位

编辑：

现在已经澄清这是React，您需要进行一些更改。React不会监视局部变量的更改并将这些更改应用于DOM。相反，您必须在React中专门触发更新。最直接的方法是通过状态。对状态的更改会导致重新渲染。您还需要将计时器间隔设置为可以在卸载组件时关闭的效果

import React from 'react'
const { useEffect, useState } = React;

const colors = ['violet', 'indigo', 'blue', 'green', 'yellow', 'orange', 'red'];

const Rainbow = (WrappedComponent) => {
  return (props) => {
    const [color, setColor] = useState(0);

    useEffect(() => {
      const timeout = setTimeout(() => {
        setColor((color + 1) % colors.length);
      }, 500);
      return () => clearTimeout(timeout);
    }, [color]);

    return (
      <div style={{ color: colors[color] }}>
        <h1>Hello World</h1>
        <WrappedComponent {...props}/>
      </div>
    );
  }
}

export default Rainbow

从“React”导入React
const{useffect，useState}=React；
常量颜色=[“紫色”、“靛蓝”、“蓝色”、“绿色”、“黄色”、“橙色”、“红色”]；
常量彩虹=（WrappedComponent）=>{
返回（道具）=>{
const[color，setColor]=useState（0）；
useffect（（）=>{
常量超时=设置超时（（）=>{
设置颜色（（颜色+1）%colors.length）；
}, 500);
return（）=>clearTimeout（超时）；
}，[颜色]；
返回(
你好，世界
);
}
}
导出默认彩虹

setTimeout方法超时500毫秒，并且永远执行，在执行setTimeout时

    let newStyle = {
      color: newColor
    }

---

已经执行了。这就是您无法获取新颜色的原因。

您的问题最初被标记为

reactjs

，然后被删除，因为不清楚react在示例代码中的作用。但是，您只需调用

this.setState（）

来代替

console.log（）

，以更新组件状态下的

color

属性

还有几件事需要注意：

使用

setInterval（）

代替反复通过

setTimeout（）

调用函数

您的代码从未达到“红色”，因为之前已重置索引。我还更改了代码，以便在不硬编码的情况下动态地考虑数组的长度

const colors=[“紫色”、“靛蓝”、“蓝色”、“绿色”、“黄色”、“橙色”、“红色”]；
设i=0；
让新的颜色；
设置间隔（（）=>{
newColor=colors[i]；
document.documentElement.style.backgroundColor=newColor；
//这是你打电话的地方
//this.setState（{color:newColor}）；
如果（i==（colors.length-1））{
i=0；
}否则{
i++；
}
}, 500);而不是创建新的作用域并递归调用loopforver。。。永远。。。每次创建一个新的setTimeout，只需使用setInterval。我还将newStyle.color添加到循环中，因为否则您永远不会设置任何内容。newstyle.color=newColor只发生一次，似乎您希望它以某种方式绑定

const colors = ['violet', 'indigo', 'blue', 'green', 'yellow',
  'orange', 'red'
];

let i = 0;
let newColor;
let newStyle = {};
let intervalId = window.setInterval(() => {
    newStyle.color = colors[i];
    //Apply newStyle to some dom element here if need be
    i++
    if (i === 6) {
        i = 0;
    }

}, 500);

//When you're ready to be done
window.clearInterval(intervalId);

与反应无关。我不确定你在问什么，你的代码似乎正常。单击运行代码段THX alot man。。但我不知道你在这里做了什么。。我已经走到一半了。再次提醒你，你真的试着去帮助他们。
useffect
和
useState
可能有点让人心烦意乱，但是理解它们会对你有很大帮助。祝你学习顺利！终于明白了，解释得很清楚。我在状态外更改值，这就是为什么它没有重新呈现更新的值。。非常感谢雅各布