Question

我目前正在制作一个ReactJS项目，但我遇到了以下问题：

每当我尝试使函数changeState()通过在构造函数中调用它来更改App的状态时，它就无法这样做。但是，如果我尝试在任何其他地方调用它，它确实会改变状态。

以下是代码：

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = { elems: [] }
        this.changeState() // This doesn't work
    }

    changeState() {
        this.setState({
            elems: ['new', 'elem']
        })
    }

    render() {
        return (
            <div>
                { this.changeState() /* This works */ }
                {this.state.elems}
            </div>
        )
    }
}

提前致谢

Answer 1

对于遇到相同问题的任何人，我发现的最佳解决方案是调用componentDidMount中的函数，这解决了在render中调用时不更新状态和无限循环的问题。

感谢所有帮助过的人，特别感谢Felix Kling和Mayank Shukla指出问题并帮助我找到解决方案;）

Answer 2

为什么在像

这样的构造函数中设置状态时调用函数

class App extends React.Component {
    constructor(props) {
        super(props)
        this.state = { elems: ['new', 'elem'] }
    }


    render() {
        return (
            <div>
                 {/* This wont work since changeState will cause an infinite loop because setState triggers a render and render triggers a setState */}
                {/* this.changeState()  */ }
                {this.state.elems}
            </div>
        )
    }
}

Answer 3

在组件安装和渲染之前调用constructor，因此您可以直接在构造函数中设置状态。请参阅React Component Lifecycle。

这是你应该在constuctor：

中设置状态的方法

constructor(props) {
  super(props);
  this.state = { elems: ['new', 'elem'] };
}

在构造函数中调用后，React函数没有设置状态

3 个答案: