根据react.js中的状态更改背景颜色

Question

我正在开发一个简单的应用程序，背景颜色应该根据季节而不同。到目前为止我已经写过：

class App extends React.Component {

  constructor() {

    super();

    this.state = {

        backgroundColor: 'blue'

    }

  }

    handleSeason = (time) => {

    const months = [

      'January',

      'February'

      'March',

      'April',

      'May',

      'June',

      'July',

      'August',

      'September',

      'October',

      'November',

      'December',

    ]

    const month = months[time.getMonth()];

    if (month === 'January' || month === 'February' || month === 'December') {

      this.setState({backgroundColor: 'white'});

    } else if

      (month === 'March' || "April" || 'May') {

      this.setState({ backgroundColor: 'yellow' });

    } else if 

    (month==='June' || month ==='July' ||month ==='August'){

      this.setState({ backgroundColor: 'green' });

     } else {

      this.setState({ backgroundColor: 'red' });

    }

  }

  

在渲染中，我返回以下 div：

      <div className='app' style={{backgroundColor: this.state.backgroundColor }}>

背景保持蓝色。我不确定问题出在哪里。控制台没有显示任何错误。任何提示将不胜感激。

Answer 1

我没有看到任何可以触发该handleSeason功能的东西......也许尝试一下会很好：componentDidMount()&nbsp;{ &nbsp;&nbsp;this.handleSeason(new&nbsp;Date()) }

Answer 2

您需要在代码中修复两件事第二个if块是这样的(month&nbsp;===&nbsp;'March'&nbsp;||&nbsp;"April"&nbsp;||&nbsp;'May')&nbsp;{这将始终将状态设置为黄色，因为字符串 April 和 May 将被视为 true，因此将其更改如下&nbsp;&nbsp;&nbsp;else&nbsp;if&nbsp;(month&nbsp;===&nbsp;"March"&nbsp;||month&nbsp;===&nbsp;&nbsp;"April"&nbsp;||month&nbsp;===&nbsp;&nbsp;"May")&nbsp;{另请检查您是否正在调用handleSeason函数，如下所示this.handleSeason(new&nbsp;Date());