useEffect / useState / setInterval React on Rails 組件未呈現

Question

我正在嘗試使用 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

我正在渲染組件：

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

Personal 和 Stack 組件可以正確渲染，但是一旦我添加了更改它下的每個組件就不會渲染。

我是一個非常新的 rails，在反應方面甚至更像是 n00b，我想知道 react-rails 是否甚至支持 useEffect、setInterval 和 useState。 歡迎任何幫助，謝謝！

Answer 1

首先，您將style設置為空字符串，而您希望在iconData style設置為空對象{} ，因為這是 JSX。 至於下一個未呈現的組件，可能是 CSS 或邏輯導致的。 調試的最佳方法是使用一個簡單的組件進行驗證，該組件返回一個普通的<p>Test this</p>以查看下一個組件未顯示的原因，但我覺得Stack某處有邏輯，什么都不返回。