ReactJS中的setState

debugcn 发表于 Dev

贝恩

我是ReactJS的新手，我似乎无法找出为什么以下setState的结果不符合我的预期（即，将值每秒增加1）

import React from 'react';
import ReactDOM from 'react-dom';

class Layout extends React.Component {

    constructor() {
        super();
        this.state = {
            name: "Behnam",
            i: 0
        }
    }

    render() {

        setInterval(() => {
            this.setState({ name : "Behnam" + this.state.i });
            this.setState({ i: this.state.i + 1 });
        }, 1000);

        return (
            <div className="container">
                {this.state.name}
            </div>
        );
    }
}

ReactDOM.render(<Layout />, document.getElementById('app'));

取而代之的是，输出字符串迅速增加（我猜想与react试图保持其虚拟DOM更新一样快）。所以我想知道正确的方法是什么？

或德罗里

每次更改状态时，都将重新渲染组件。因为您是setInterval在render方法中启动的，所以您会得到另一个间隔，该间隔会更改状态并重新渲染，依此类推。

将组件移动setInterval到componentDidMount，该组件在挂载时仅被调用一次：

import React from 'react';
import ReactDOM from 'react-dom';

class Layout extends React.Component {

    constructor() {
        super();
        this.state = {
            name: "Behnam",
            i: 0
        }
    }

    componentDidMount() { set the interval after the component mounted, and save the reference
        this.interval = setInterval(() => {
            this.setState({ 
                name: `Behnam${this.state.i}`, 
                i: this.state.i + 1
            });
        }, 1000);
    }

    componentWillUnmount() {
        this.interval && clearInterval(this.interval); // clear the interval when the component unmounts
    } 

    render() {
        return (
            <div className="container">
                {this.state.name}
            </div>
        );
    }
}

ReactDOM.render(<Layout />, document.getElementById('app'));

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。