javascript - 使用 setTimeout() 更新 React prop

Question

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

此时函数运行并且控制台日志显示数组正在以精确的时间间隔更新，但是，实际的 H3 标签保持为空。

我尝试过使用 componentHasMounted() 并尝试寻找将 render() 函数放入 professions() 函数中的方法，但无法找到正确封装它的方法(如果可能的话) ).我还尝试按照新的 Date() 教程更新 React 文档中的渲染元素，但无济于事——我确定这很可能是我的错误，但来自 SO 社区的任何帮助都会震撼。

注意，我为此使用了 create-react-app。

代码如下:

专业.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;

还有 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;

Answer 1

在 professions() 中设置本地状态 profession 而不是在 constructor 中。此外，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;

希望对您有所帮助:)