Question

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

我认为我的问题是因为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触发动画不起作用

1 个答案: