通过 setState 触发动画不起作用

Question

当我在我的页面中点击一个路径点时，我正在调用一个函数。该函数在调用 setState 后记录状态，这表明状态已更新为 {visible: true} 但是，在 React Dev Tools 中，它表明状态仍然为 false。因为状态仍然是 false，所以 Animated 组件不可见。如果我使用 React Dev Tools 将 visible 更改为 true，动画组件将变为可见。

我认为我的问题是因为我的 setState 没有在函数调用之外更新组件状态，这可以解释为什么记录组件的状态在控制台中显示为已更新但没有触发重新渲染也没有使 Animated 组件的 isVisible 属性通过 state 属性设置为 true。

这是我正在处理的组件

import React, { Component } from 'react'

import { Waypoint } from  'react-waypoint'
import { Animated } from 'react-animated-css'

export default class About extends Component {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
    };

    this.OnEnter = this.onEnter.bind(this);
  }


  onEnter({ currentPosition }){
        this.setState({
            visible: true
        });
        console.log(this.state);
  };

  render() { 
    return (
            <Waypoint onEnter={this.onEnter}></Waypoint>
            <Animated animationIn="fadeInUp" isVisible={this.state.visible}>
                <h2 className="mb-4">About Me</h2>
                <p>A small river named Duden flows by their place and supplies it with the necessary nutrients.</p>
            </Animated>
    );
  }
}

Answer 1

发布我的评论作为答案。

有错别字。

请将行 this.OnEnter = this.onEnter.bind(this); 更新为 this.onEnter = this.onEnter.bind(this);。

通过 setState 触发动画不起作用

Triggering animation via setState not working

reactjs

react-animated

react-devtools