Reactjs 在ES6&；中随时间返回多个值；反应

好的，那么有没有一种方法可以从函数中返回一个值-返回的方式-但不能停止函数-返回的方式

我需要这个，这样我就可以经常返回值

我的代码如下所示：

loopingTitleTextHandler = () => {
    const title = ["good", "cool", "887H", "Vertical"];
    for (i = 0; i < 999999; i++) {
        var j = i%4;
        // loopingTitleTextHandler() // calls itself before return terminates execution 
        return title[j]; //return 0,1,2,3 in a loop with 3 second delay
    }
}

---

您可以在生命周期挂钩中使用

setInterval

。这将每隔一段时间重复调用该函数

  loopingTitleTextHandler = () => {
        const title = ["good", "cool", "887H", "Vertical"];
        for (i = 0; i < 999999; i++) {
            var j = i%4;
            // loopingTitleTextHandler() // calls itself before return terminates execution 
            return title[j]; //return 0,1,2,3 in a loop with 3 second delay
        }
    }

---

在React的上下文中，我认为通过状态管理这些值更有意义。假设您希望每3秒钟返回一个新标题，您可以执行以下操作：

这里有一个沙箱：

App.js

从“React”导入React；
从“react dom”导入react dom；
从“/ShowTitle”导入ShowTitle；
导入“/styles.css”；
类应用程序扩展了React.Component{
状态={
标题：[“好”、“酷”、“887H”、“垂直”]，
当前标题：“好”
};
loopingTitleTextHandler=（）=>{
const{currentTitle，title}=this.state；
常数nextittleindex=
title.indexOf（currentTitle）+1==title.length
? 0
：title.indexOf（currentTitle）+1；
this.setState（{currentTitle:title[nextTitleIndex]}）；
};
render（）{
返回(
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

showttitle.js

从“React”导入React；
类ShowTitle扩展了React.Component{
componentDidMount（）{
设置间隔（（）=>{
this.props.changeTitle（）；
console.log（this.props.currentTitle+“”+new Date（）.getTime（））；
}, 3000);
}
render（）{
返回标题：{this.props.currentTitle}；
}
}
导出默认ShowTitle；

在父组件（App.js）中，我们跟踪

currentTitle

。调用

loopingTitleTextHandler（）

时，我们将使用数组中的下一个标题更新state.currentTitle

currentTitle

被传递到

ShowTitle

组件

---

在子组件中，我们使用

setInterval（）

每隔3秒调用

loopingTitleTextHandler（）

，并显示下一个标题。

为什么不在这里使用setInterval（），以便它在固定的intervalvDog中执行，请尝试下面的解决方案，并让我知道它是否有效：）集成解决方案的任何更新？我真的很好奇你想创建什么。自从昨天发布这篇文章以来，我一直没有机会进行研究。这很有效，我添加了一些更多的细节，因为我想要的东西将适用于更多的场景。：）@vDog啊，我明白了，我不确定是否有更具重现性的解决方案，但你肯定可以将其转化为挂钩。并在其他组件中使用它。

  loopingTitleTextHandler = () => {
        const title = ["good", "cool", "887H", "Vertical"];
        for (i = 0; i < 999999; i++) {
            var j = i%4;
            // loopingTitleTextHandler() // calls itself before return terminates execution 
            return title[j]; //return 0,1,2,3 in a loop with 3 second delay
        }
    }

componentWillMount(){
  setInterval(()=>{
      this.loopingTitleTextHandler()
 }, 3000) // 3000 milli seconds, that is 3 sec
 }

import React from "react";
import ReactDOM from "react-dom";
import ShowTitle from "./ShowTitle";

import "./styles.css";

class App extends React.Component {
  state = {
    title: ["good", "cool", "887H", "Vertical"],
    currentTitle: "good"
  };

  loopingTitleTextHandler = () => {
    const { currentTitle, title } = this.state;
    const nextTitleIndex =
      title.indexOf(currentTitle) + 1 === title.length
        ? 0
        : title.indexOf(currentTitle) + 1;

    this.setState({ currentTitle: title[nextTitleIndex] });
  };
  render() {
    return (
      <div className="App">
        <ShowTitle
          changeTitle={this.loopingTitleTextHandler}
          currentTitle={this.state.currentTitle}
        />
      </div>
    );
  }
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

import React from "react";

class ShowTitle extends React.Component {
  componentDidMount() {
    setInterval(() => {
      this.props.changeTitle();
      console.log(this.props.currentTitle + " " + new Date().getTime());
    }, 3000);
  }

  render() {
    return <div>Title: {this.props.currentTitle}</div>;
  }
}

export default ShowTitle;