Question

我正在尝试理解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？

非常感谢您！

Answer 1

variable3在state上不存在，在state3上存在，因此当您尝试使用variable3 : old.variable3+1访问它时，它不是{{ 1}}，因此您实际上是在做old

要注意的一件事是undefined + 1是React组件中的一个特殊名称，因此当state更改时，您的组件将重新呈现，而当state更改时，则不会重新呈现。

为什么这个状态变量没有实时增加？

1 个答案: