useEffect / useState / setInterval React on Rails 组件不渲染答案

【问题标题】：useEffect / useState / setInterval React on Rails components not renderinguseEffect / useState / setInterval React on Rails 组件不渲染
【发布时间】：2021-02-17 10:43:27
【问题描述】：

我正在尝试使用 useEffect、setInterval 和 useState 以按时间间隔循环浏览 fontawesome 图标。我对反应很陌生，我的组件和它下面的所有组件都没有呈现任何错误。我正在使用最新版本的 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

我正在渲染组件：

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

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

我是一个相当新的 Rails，在 react-rails 中是否支持 useEffect、setInterval 和 useState。欢迎任何帮助，谢谢！

【问题讨论】：

标签： ruby-on-rails reactjs react-hooks font-awesome react-rails

【解决方案1】：

首先，您将style 设置为空字符串，而您希望将style 设置为iconData 中的空对象{}，因为这是JSX。至于下一个组件未呈现，可能是 CSS 或逻辑导致它。最好的调试方法是用一个简单的组件来验证，它返回一个普通的<p>Test this</p>，看看为什么下一个组件没有显示，但我觉得Stack 有什么地方没有返回任何逻辑。

【讨论】：