时间戳

首页 > 解决方案 > 为什么这个状态变量不是实时递增的？

javascript - 为什么这个状态变量不是实时递增的？

问题描述

我正在尝试理解 react.js 并且我有以下代码：

import React, { Component } from 'react';

class App extends Component {
    state = {
        variable : 12,
    }
    state1 = () => "Hello"
    state3 = {
        variable3 : 1,
    }
    varia = () => { this.setState((old, pr) => {
        return {
            variable3 : old.variable3+1
        }
    });
    }
    componentDidMount(){
        this.timer = setInterval(() => this.varia(), 1000);
    }
    componentWillUnmount(){
        clearInterval(this.timer);
    }
    render(){
        return (<>
        <div>{this.state.variable}</div>
        <div>{this.state3.variable3}</div>
        </>);
    }
}

export default App;

这段代码不起作用，而下面的代码就像一个魅力：

import React, { Component } from 'react';

class App extends Component {
    state = {
        variable : 12,
    }
    state1 = () => "Hello"
    state3 = {
        variable3 : 1,
    }
    varia = () => { this.setState((old, pr) => {
        return {
            variable : old.variable+1
        }
    });
    }
    componentDidMount(){
        this.timer = setInterval(() => this.varia(), 1000);
    }
    componentWillUnmount(){
        clearInterval(this.timer);
    }
    render(){
        return (<>
        <div>{this.state.variable}</div>
        <div>{this.state3.variable3}</div>
        </>);
    }
}

export default App;

你知道为什么我在第一种情况下它不起作用吗？我的意思是我必须使用 state 而不是 state3 ？

非常感谢 ！

标签： javascriptreactjs

解决方案

variable3不存在于state，它存在于state3，因此当您尝试使用 访问它时variable3 : old.variable3+1，它不是 on 的属性old，因此您实际上是在做undefined + 1

需要注意的一点是，它state是 React 组件中的一个特殊名称，因此您的组件会在更改时重新渲染，state但不会在state3更改时重新渲染。

推荐阅读