Ruby on rails useEffect/useState/setInterval对未渲染的Rails组件作出反应

我正在尝试使用useEffect、setInterval和useState，以便按一定的时间间隔在图标之间循环。我是一个非常新的反应，我没有得到任何错误我的组件和它下面的所有组件只是没有渲染。我正在使用

react-rails

gem的最新版本

以下是组件的代码：

import React, {useEffect, useState} from "react"
import PropTypes from "prop-types"

function Changing(){

  const mobileData = {
    icon: "fas fa-mobile-alt",
    caption: "Mobile Applications",
    style: ""
  }
  const webData = {
    icon: "fas fa-desktop",
    caption: "Web development",
    style: ""
  }
  const internetData = {
    icon: "fas fa-wifi",
    caption: "& Everything Internet",
    style: ""
  }
  const data = [mobileData, webData, internetData];
  const [iterable, setIterable] = useState(0);
  const [iconData, setIconData] = useState(mobileData);


  function changeIterable(){
    if(iterable === 0){
      setIterable((prevIterable) => prevIterable + 1)
    }
    else if(iterable === 1){
      setIterable((prevIterable) => prevIterable + 1)
    }
    else{
      setIterable((prevIterable) => prevIterable - 2)
    }
  }

  useEffect(() => {
    const intervalID = setInterval(() =>{
      changeIterable();
      setIconData(data[iterable])
    }, 4000);
    return () => clearInterval(intervalID)
  })

  return (
      <React.Fragment>
        <div className="row">
          <div className="col-md-6">
            <i className={iconData.icon} style={iconData.style} />
          </div>
          <div className="col-md-6">
            <h3 style={iconData.style}>{iconData.caption}</h3>
          </div>
        </div>
      </React.Fragment>
  );
}

export default Changing

import React，{useffect，useState}来自“React”
从“道具类型”导入道具类型
函数更改（）{
移动数据常数={
图标：“fas fa移动alt”，
标题：“移动应用程序”，
风格：“
}
常量webData={
图标：“fas fa桌面”，
标题：“网络开发”，
风格：“
}
const internetData={
图标：“fas fa wifi”，
标题：“&一切互联网”，
风格：“
}
常量数据=[mobileData、webData、internetData]；
const[iterable，setIterable]=useState（0）；
常数[iconData，setIconData]=使用状态（移动数据）；
函数可变（）{
如果（iterable==0）{
可设置（（可设置）=>可设置+1）
}
else if（iterable==1）{
可设置（（可设置）=>可设置+1）
}
否则{
可设置（（可预设置）=>可预设置-2）
}
}
useffect（（）=>{
const intervalID=setInterval（（）=>{
可变的（）；
setIconData（数据[iterable]）
}, 4000);
return（）=>clearInterval（intervalID）
})
返回(
{iconda.caption}
);
}
导出默认更改

我正在使用以下内容渲染组件：

<%= react_component "Personal" %>
<%= react_component "Changing" %>
<%= react_component "Stack" %> 

Personal和Stack组件的渲染是正确的，但一旦我添加了更改，它下的每个组件都不会渲染

---

我是非常新的rails，在react方面更像n00b，我想知道react rails是否支持useEffect、setInterval和useState。欢迎任何帮助，谢谢

首先，您要将

样式设置为空字符串，而不是将
样式设置为
iconda
中的空对象
{}
，因为这是JSX。至于下一个不呈现的组件，可能是CSS或逻辑造成的。最好的调试方法是用一个返回普通
的简单组件进行验证，测试这个
以了解下一个组件没有显示的原因，但我感觉
堆栈的某个地方有逻辑，没有返回任何东西