收到名为"无法在尚未挂载的组件上调用 setState"的警告

Question

这是我的代码

import React, { Component } from 'react';
class Rando extends Component {
constructor(props) {
super(props); // want to use props insode brackets if we want to use props inside the constructor
this.state = { num: 0, color: 'purple' };
this.makeTimer();
}
makeTimer() {
setInterval(() => {
let rand = Math.floor(Math.random() * this.props.maxNum);
this.setState({ num: rand });
}, 10);
}
render() {
console.log('changing');
return (
<div className=''>
<h1>{this.state.num}</h1>
</div>
);
}
}
export default Rando;

我收到一个警告，看起来像这样

index.js:1警告:无法在尚未挂载的组件上调用setState。这是一个no-op，但它可能表明您的应用程序中存在错误。相反，直接赋值给this.state，或者在随机组件中定义一个具有所需状态的state = {};类属性。

我是初学者，我不知道是什么原因造成的。请帮帮我。提前感谢

Answer 1

计时器函数甚至在组件被挂载之前就被执行了。尝试将代码放入componentDidMount钩子中。另外，不要忘记清除componentWillUnmount内部的间隔id。

沙盒链接供参考:https://codesandbox.io/s/react-basic-class-component-forked-sybv0?file=/src/index.js

<<p>修改片段/strong>

import React, { Component } from 'react';
class Rando extends Component {
constructor(props) {
super(props); 
this.state = { num: 0, color: 'purple' };
this.timer = null;
}
componentDidMount() {
this.makeTimer();
}

componentWillUnmount() {
clearInterval(this.timer);
}
makeTimer = () => {
this.timer = setInterval(() => {
let rand = Math.floor(Math.random() * this.props.maxNum);
this.setState({ num: rand });
}, 10);
}
render() {
return (
<div>
<h1>{this.state.num}</h1>
</div>
);
}
}
export default Rando;

Answer 2

你应该在componentDidMount()上调用this.makeTimer();而不是constructor

componentDidMount(){
this.makeTimer();
}

Answer 3

试试这个代码

import React, { Component } from 'react';
class Rando extends Component {
constructor(props) {
super(props); // want to use props insode brackets if we want to use props inside the constructor
this.state = { num: 0, color: 'purple' };
this.makeTimer((data) => {
this.setState(data);
});
}
makeTimer(cb) {
setInterval(() => {
let rand = Math.floor(Math.random() * this.props.maxNum);

cb({ num: rand })
}, 10);
}
render() {
console.log('changing');
return (
<div className=''>
<h1>{this.state.num}</h1>
</div>
);
}
}
export default Rando;

Answer 4

试试这个:

import React, { Component } from 'react';
class Rando extends Component {
constructor(props) {
super(props); // want to use props insode brackets if we want to use props inside the constructor
this.state = { num: 0, color: 'purple' };
}
makeTimer() {
setInterval(() => {
let rand = Math.floor(Math.random() * this.props.maxNum);
this.setState({ num: rand });
}, 10);
}
componentDidMount(){
this.makeTimer();
}
render() {
console.log('changing');
return (
<div className=''>
<h1>{this.state.num}</h1>
</div>
);
}
}
export default Rando;