Question

我正在尝试使用useEffect，setInterval和useState，以便在一定的时间间隔内循环浏览超棒的图标。我反应很新，我的组件及其下面的所有组件都未呈现任何错误。我正在使用 react-rails宝石的最新版本

这是组件的代码：

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" %>

个人和堆栈组件可以正确渲染，但是一旦我添加了更改下面的每个组件，就无法渲染。

我是相当新的Rails，甚至在响应时还需要一个n00b，我想知道react-rails是否甚至支持useEffect，setInterval和useState。欢迎任何帮助，谢谢！

Answer 1

首先，您将style设置为空字符串，而您想将style中的{}设置为空对象iconData，因为这是JSX 。至于下一个未渲染的组件，可能是CSS或逻辑引起的。调试的最佳方法是仅使用一个返回香草<p>Test this</p>的简单组件进行验证，以查看下一个组件为何未显示，但是我感觉Stack的某个逻辑什么都不返回。 / p>

useEffect / useState / setInterval Rails组件上的React无法呈现

1 个答案: