Javascript 使用setTimeout（）更新React属性

我第一次尝试使用React，并且正在寻找一种方法，将每4秒更新一次新数据的数组内容推送到H3标记中。我知道这可以通过vanilla JS实现，但我想知道是否有一种好的、干净的方法可以通过React生态系统实现

函数运行时，控制台日志显示阵列正在以精确的间隔更新，但是，实际的H3标记保持为空

我曾尝试使用componentHasMounted（）并尝试寻找将render（）函数放入professions（）函数中的方法，但无法找到正确封装它的方法（如果可能的话）。我还尝试按照新的Date（）教程更新React docs中的渲染元素，但没有效果-我相信这可能是我的错误，但SO社区的任何帮助都会起作用

注意，我正在使用CreateReact应用程序

代码如下：

Profession.js

import React, { Component } from 'react';
import './Profession.css';

class Profession extends Component {
  constructor(props) {
      super(props);
      this.state = {profession: professions()};
  }

  render() {
    return (
      <div className="Profession">
          <div className="keyboard">
          <h3>{this.state.profession}</h3>
          </div>
      </div>
    );
  }
}

function professions() {
    const professionList = ['Developer', 'Designer'];
    var profession = [];
    for (var i = 0; i < professionList.length; i++) {
        setTimeout(function (i) {
            return function () {
                profession = [];
                profession.push(professionList[i]);
                console.log(profession);
                return profession;
            }
        }(i), 3800*i);
    }
}




export default Profession;

import React，{Component}来自'React'；
导入“/Profession.css”；
类专业扩展组件{
建造师（道具）{
超级（道具）；
this.state={profession:professions（）}；
}
render（）{
返回(
{本州职业}
);
}
}
职能专业（）{
const professionList=['Developer'，'Designer']；
var职业=[]；
对于（变量i=0；i

和App.js以防万一

import React, { Component } from 'react';
import './App.css';
import Profession from './Profession'

class App extends Component {
  render() {
    return (
      <div className="App">


        <h1>Sunil<br/>Sandhu</h1>
        <Profession />
      </div>
    );
  }
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
从“./专业”导入专业
类应用程序扩展组件{
render（）{
返回(
桑迪湖
);
}
}
导出默认应用程序；

在

professions（）中设置本地状态
profession
，而不是在
构造函数中设置。另外，
professions（）
应该是组件的一部分，以便它可以更新本地状态。这将触发组件更新和更新
H3

import React, { Component } from 'react';
import './Profession.css';

class Profession extends Component {
  constructor(props) {
    super(props);

    // set 'profession' default to null
    this.state = {profession: null};

  }

  componentDidMount() {
    // call professions() here
    this.professions();
  }

  professions() {
    const professionList = [
      'Sunny',
      'Developer',
      'Designer',
      'Programmer',
      'Notebook Hoarder',
      'Developer',
    ];

    for (let i = 0, l = professionList.length; i < l; i++) {
      setTimeout(() => {
        // update local state property 'profession'
        that.setState({ profession: professionList[i] });
      }, 4000*i);
    }
  }

  render() {
    return (
      <div className="Profession">
        <div className="keyboard">
          <h3>{this.state.profession}</h3>
        </div>
      </div>
    );
  }
}

export default Profession;

import React，{Component}来自'React'；
导入“/Profession.css”；
类专业扩展组件{
建造师（道具）{
超级（道具）；
//将“专业”默认值设置为空
this.state={profession:null}；
}
componentDidMount（）{
//在这里打电话
这个；
}
职业（）{
const professionList=[
"晴朗",，
“开发商”，
“设计师”，
“程序员”，
“笔记本囤积者”，
“开发商”，
];
for（设i=0，l=professionList.length；i{
//更新当地国家财产“专业”
该.setState（{profession:professionList[i]}）；
}，4000*i）；
}
}
render（）{
返回(
{本州职业}
);
}
}
出口违约专业；

希望它有帮助：）
啊，我想我明白了代码的问题所在-this.setState是绝对必需的，但它试图引用setTimeout（）函数中的“this”，而不是组件属性。因此，现在的网页呈现与更新的内容-非常感谢！我将对你的答案进行编辑，然后标记为正确：）@SunilSandhu，接得好！另外，我认为在
componentDidMount（）
中调用
this.professions（）
比调用
render（）
更合适。你完全正确！我再次编辑了答案，现在也包括了这一点。：）@SunilSandhu我进一步优化了你的代码。仅供参考-如果您使用ES6箭头功能，您不必单独处理
此
，那太好了！正是出于这个原因，我尝试使用箭头函数，但当时让它工作起来有点困难，但看起来可能是因为当时其他部分不工作。非常感谢您在这方面的帮助-如果您有兴趣了解我需要的代码，请访问www.sunilsandhu.com:）