在循环中更改组件状态[重复]

Question

我想做类似this site 上的动画菜单（我现在正在考虑导航栏下方自行移动的图像）：

我有一个具有 3 个状态的组件，每个状态指示应该显示哪个带有链接的图像。我相信我应该使用setTimeout 来更改组件的状态。我尝试在componentDidMount/componentWillMount 方法中执行此操作，但收到错误：

TypeError：无法读取未定义的属性“为什么”

据我了解，这表明状态未设置？我做错了什么？

export default class Menu extends Component {
  constructor(props) {
    super(props)
    this.state = {
      why: true,
      shop: false,
      workshop: false
    }
  }

  componentWillMount() {
    setInterval(function(){
      if (this.state.why) {
        this.setState({why: false, shop: true, workshop: false})
      }
      else if (this.state.shop) {
        this.setState({why: false, shop: false, workshop: true})
      }
      else if (this.state.workshop) {
        this.setState({why: true, shop: false, workshop: false})
      }
    }, 3000);
  }

  render() {
    return (
      <div>
        { this.state.why && 
          <a href='/'>
            <Image src={horizontal1}
              className='pics'
            />
          </a>
        }
        { this.state.shop && 
          <a href='/'>
            <Image src={horizontal2}
              className='pics'
            />
          </a>
        }
        { this.state.workshops && 
          <a href='/'>
            <Image src={horizontal3}
              className='pics'
            />
          </a>
        }
      </div>
    );
  }
}

Answer 1

请使用粗箭头函数访问 setInterval 内的构造函数

setInterval(()=> {
  if (this.state.why) {
    this.setState({why: false, shop: true, workshop: false})
  }
  if (this.state.shop) {
    this.setState({why: false, shop: false, workshop: true})
  }
  if (this.state.workshop) {
    this.setState({why: true, shop: false, workshop: false})
  }
}, 3000);