Question

在我的本地本机应用程序中，我将固定时间从7点更改为7点30分。我正在ComponentWillMount中更改状态。但是，每当我转到该组件时，它就会一次又一次地调用该状态，当我转到另一个组件时，它甚至不会停止。我想停止这种调用自身的无限循环。这是代码：

import { withNavigation } from "react-navigation";
class Third extends Component {
  constructor(props) {
    super(props);
    this.state = {
      toggle: 0,
      live: false
    }
  }

  componentWillMount() {
    const { navigation } = this.props;
    this.focusListener = navigation.addListener("didFocus", () => {
      this.changeLang()
    });
    var today = new Date()
    var time = today.getHours()
    console.log(today.getMinutes())
    var weekDay = today.getDay()
    if ((time >= 19) && (time <= 20 ) && (weekDay === 0 ||3 ||6)){
      if(today.getMinutes()<=30){
      this.setState({ live: true })
    } 
  }
  }
  async changeLang() {
    try {
      const value = await AsyncStorage.getItem('toggle')
      this.setState({ toggle: JSON.parse(value) })
    } catch (e) {
      // error reading value
    }
  }

  render() {
    const state = this.state;
    console.log('live', this.state.live)
    this.changeLang()
    return (
      <Container style={{ backgroundColor: '#fff' }}>
        <Content>
         <Left></Left>
         <Body></Body>
         <Right>{(this.state.live === true) ? <Icon name='football'/>: <Icon name='refresh'/>}</Right>

              </View>
            </Card>
          </View>
          
        </Content>
      </Container>
    );
  }
}

export default withNavigation(Third)

这里this.state.live一直在提供控制台，并且没有停止。在这里可以解决该问题？

Answer 1

您的问题在于渲染功能中

this.changeLang()

每次调用this.setState时，组件将重新渲染，而当组件重新渲染时，render函数将被调用。

所以导致无限循环的顺序是

组件安装=>在您调用this.changeLang()的渲染函数中的changeLog =>在您正在调用的this.setState =>的render函数中被调用并再次执行this.changeLang() =>在changeLog函数中，您正在调用this.setState ...依此类推。

这样，您最终会陷入无限循环。

只需从渲染函数中删除this.changeLang()，因为您已经在componentWillMount中调用了该函数。

Answer 2

在这里调用setState使您的组件成为产生无限循环的竞争者。删除this.changeLang（）以使其正常工作

ComponentWillMount中的状态更改进入无限循环

2 个答案: