Question

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

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

我试图利用componentHasMounted（）并尝试查看将collective（）函数放入professionions（）函数内部的方法，但无法找到正确封装它的方法（如果这甚至可能）。我也尝试按照新的Date（）教程更新React文档中的渲染元素，但无济于事 - 我确定它可能是我的错误，但任何帮助来自SO社区的人会摇滚。

抬起头来，我正在使用create-react-app。

以下是代码：

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;

和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

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

希望有所帮助：）

使用setTimeout（）更新React prop

1 个答案: